配置Chrome支持本地(file协议)的AJAX请求
什么问题
WEB开发过程中,很多时候我们都是写一些简单的Demo,并不是开发一个完整项目,此时我们常见的操作是:
•新建文件夹
•新建需要的文件
•在Sublime(或其他编辑器)中完成DEMO的编码
•双击HTML文件,直接在浏览器中运行演示
如果此时Demo中有AJAX操作,浏览器就会报一个错:
XMLHttpRequest cannot load file:///Users/iceStone/Documents/Learning/angular/demo/angular-moviecat/movie/view.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
原因很简单,浏览器(Webkit内核)的安全策略决定了file协议访问的应用无法使用XMLHttpRequest对象,错误消息中也很清楚的说明了:
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
跨域请求仅支持协议:http, data, chrome, chrome-extension, https, chrome-extension-resource
在某些浏览器中是允许这种操作的,比如Firefox浏览器,也就是说Filefox支持file协议下的AJAX请求。
解决办法
作为我个人最喜欢的Chrome,强大,没什么好说的,只有想不到,几乎没有做不到,所以必须也得支持:
Windows:
•设置Chrome的快捷方式属性,在“目标”后面加上?allow-file-access-from-files,注意前面有个空格,重新打开Chrome即可。
Mac:
•只能通过终端打开浏览器:打开终端,输入下面命令:open -a “Google Chrome” ?args ?disable-web-security然后就可以屏蔽安全访问了[ ?args:此参数可有可无]
补充说明
长久来看,你肯定是需要通过HTTP的方式访问你的应用,那就需要配置HTTP服务器软件。但是对于一些刚入门的同学,配一个HTTP服务器(比如Apache、IIS等)比较繁琐,望而却步。
•对于使用IDE的同学没什么好说的,每个用于Web开发的IDE都内置http服务器,不用单独配置。
•对于喜欢轻量级编辑器的同学,比如Sublime Text,它默认是没有内置HTTP服务器的
接下来推荐一款Sublime的插件Sublime Server,这个插件可以提供一个静态文件HTTP服务器,具体使用方式如下:
•安装Package Control(Sublime的插件管理工具),不会安装自行Google
•Command+Shift+P或Ctrl+Shift+P打开命令面板,输入Package Control: Install Package
•稍等片刻(此时会连接到插件提供商的服务器,比较慢,有可能背墙),搜索SublimeServer
•安装完成过后通过Tool → SublimeServer → Start SublimeServer
•一定要用打开文件夹的方式使用Sublime,否则没有办法正常使用SublimeServer。
•打开HTML文件,在右键菜单中选择View in SublimeServer,此时就可以以HTTP方式在浏览器中访问该文件了,
•如果该选项是灰色的,那就说明没有启动SublimeServer,Tool → SublimeServer → Start SublimeServer
到此为止,你已经可以在Sublime中使用HTTP服务器了。
可能遇到的问题
如果Start SublimeServer不能点,可能是当前8080端口被占用了(SublimeServer默认使用8080端口)
解决方法就是打开配置文件将端口修改为其他端口:
以下是我的配置:
{ "attempts": 5, "autorun": false, // 是否在启动Sublime时自动启动SublimeServer "defaultExtension": ".html", "interval": 500, "mimetypes": { "": "application/octet-stream", ".c": "text/plain", ".h": "text/plain", ".py": "text/plain" }, "port": 2016 // 端口号 }
当然其他编辑器也有类似的插件。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 我所理解的Remoting (2) :远程对象的生命周期管理[下篇]
- struts2(六)之ognl表达式与ActionContext、ValueStack
- Windows8异步编程的注意事项
- CSS魔法堂:深入理解line-height和vertical-align
- Gradle 10分钟上手指南
- gradle项目中profile的实现
- 欧盟推出“数字经济税收制度”优化了税收制度,却影响区块链行业
- CSS魔法堂:你一定误解过的Normal flow
- ASP.NET输出JSON格式数据
- haproxy 新手上路
- 区块链是如何保护交易隐私的?eprint这篇论文告诉你答案
- gradle项目中资源文件的相对路径打包处理技巧
- Markdown 语法手册 (完整整理版)
- WordPress3.5安装出现的几个问题
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- updatedb命令
- Vue路由懒加载
- 简单谈谈我的Android屏幕适配之路
- Js中Symbol对象
- 责任链模式
- Android Studio升级到3.0后遇到的坑
- Android原生项目集成React Native的方法
- Android编程之光线传感器用法详解
- Android Studio 3.0 新功能全面解析和旧项目适配问题
- Android开发中使用外部应用获取SD卡状态的方法
- Android编程使用光线传感器获取光线强弱的方法【LightSensorManager封装类】
- Android开发中的重力传感器用法实例详解
- 腾讯云TKE-Ingress案例: Nginx-Ingress 实现grpc转发
- 机器人软件中间层 yarp-Yet Another Robot Platforms
- 3分钟短文:Laravel写个命令行,你就是下一个Geek!