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

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

一开始用的是<script type='text/javascript' src='test.json'></script>

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

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

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

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

    <script>
        $(function(){
            $.getJSON("test.json", function(data){
                alert('abc');
            });
        });
    </script>
然而，在调用本地测试文件时，却始终无法成功

一开始以为是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文件依然无效）

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

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

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