配置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 // 端口号
} 

当然其他编辑器也有类似的插件。 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。