关于本地文件请求json文件

因为需要用到json数据格式，上网查了一下例子之后我就想本地测试一下看能不能成功。

 

结果，chrome下没有任何反应，打开控制台之后报错如下：

XMLHttpRequest cannot load file: ///E:/project/info.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

查了一下资料发现，这似乎是Ajax跨域问题。

 

什么叫跨域？

首先我们应该知道在JavaScript的安全性上，有一条很重要的安全限制，叫“同源策略”。就是一个脚本只能读取与它同源（如由同一个主机下载，通过同一个端口下载或者下载协议相同）的窗口或者文档的属性。

这种限制是很有必要的，如果没有这种限制，窗口中的不可靠脚本就可以用DOM方法读取浏览器窗口的内容，而窗口中可能会含有私有信息。

跨域的意思，顾名思义，跨是跨越，域就是别的服务器，跨域其实就是去别服务器上取东西。 只要协议、域名、端口有任何一个不同，都被当作是不同的域

 

然后问题来了，我这是本地测试啊，跨什么域？继续查资料。

查出来的结果是Chrome在读取本地相对路径脚本时，禁止向第三方请求数据。chrome的安全机制限制了本地文件的xhr请求。

 

好吧，于是我把整个项目放上github，github page上显示正常，我的问题倒是解决了。

关于Ajax跨域的问题，有兴趣的还可以看一下这份文档：How to run things locally

 

接下来我顺手测试了一下别的浏览器本地文件跨域，结果：

Firefox：没有任何安全提示与确认，跨域成功。

IE11：默认会提示加载不安全activex控件，要求确认，确认之后跨域是OK的。