jquery学习笔记——getJSON无法读取本地json数据的问题

今天在改网页的时候,需要调取本地json文件进行测试

一开始用的是

在调用的时候没有任何问题。

当然,这种做法说白了就是把所有的json文件中的数据都加载到内存中


但在数据量庞大的情况下,这种方法显然是不可取的

所以想到了用jquery的getjson异步加载

    

然而,在调用本地测试文件时,却始终无法成功

一开始以为是json文件格式或者编码的问题,检查了n次之后都没找出问题的原因

(最麻烦的是百度搜索相关问题也没有丝毫头绪)


后来在浏览器控制台中找到了问题的原因

(以搜狗浏览器为例:F12-Console)

XMLHttpRequest cannot load file:///C:/Users/Administrator/Desktop/test.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, se-extension, https.

跨域请求仅支持在http/data/chrome/se-extension/https协议下使用

什么叫跨域?
字面理解,跨是跨越,域是别的服务器,跨域就是到别的服务器上取东西。
报错的意思应该就是chrome下,跨域请求只能通过通过这些协议标准实现:http、data、https、chrom-extension、chrom-extension-resource。
只要协议、域名、或端口有任何一个不同,就会被当做是不同的域。
但是仔细再一想,我请求的是本地文件啊,没有通过服务器请求啊,应该不算跨域么?什么鬼

再查发现,chrome在读取本地相对路径脚本时,禁止向第三方请求数据。 (只要是通过file://方式访问,或者直接拖进浏览器访问,都叫本地运行) 
什么叫第三方?那就是不管本地文件、还是服务器url 文件都不行。
提示这个原因是:浏览器为了安全性考虑,默认对跨域访问禁止。


知道了原因,接下来是解决方式:

解决一: 
在sublime里面 启动sublimeServer,开启服务器模式,在浏览器中通过localhost:8080/index.html访问,再看 debug tool,没有报错了,完美!~成功访问到本地json文件。

好奇助我成长,顺手拖进火狐测了一下,并没有报错 
FireFox : 允许读取本地相对路径脚本。

这是万能的(就是麻烦……)

解决二: 
查资料,发现还有一种解决方法,不用启动服务器模式,直接更改chrome的设置就行。 
在chrome属性设置中,添加启动参数: 
--allow-file-access-from-files : 允许本地Ajax请求,也叫file协议下的Ajax请求 
--enable-file-cookies : 允许chrome保存本地设置cookie

设置方法:chrome快捷方式–右键“属性”–快捷方式–目标 

即右键chrome的快捷方式(只有快捷方式才能额外添加命令)属性-快捷方式-目标

将目标改为C:\Users\Administrator\AppData\Local\Google\Chrome\Application\chrome.exe --allow-file-access-from-files --enable-file-cookies。

使用时打开chrome浏览器,再把html文件丢进去就可以生效了。(直接打开html文件依然无效)

jquery学习笔记——getJSON无法读取本地json数据的问题_第1张图片

ps:如果不改快捷方式,则在cmd命令中执行时加上后面这一段(或者建个bat文件来搞也是可以的)

pps:经测试,方法二对搜狗浏览器和世界之窗浏览器无效(估计也没人用这玩意儿开发……)


引用资料:https://blog.csdn.net/u012786716/article/details/56481768

你可能感兴趣的:(jquery)