配置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 // 端口号 }
当然其他编辑器也有类似的插件。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇: VBS教程:方法-GetDrive 方法