关于本地文件请求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的。

:(

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。