ajax请求本地json文件，谷歌浏览器报跨域错误

前端在做页面的时候，有时候需要可能为了测试某一功能，或者为了自己做demo，会访问本地json文件，获取数据，进行处理；但最近发现使用ajax请求json文件的时候，谷歌浏览器报错如下：

Access to XMLHttpRequest at ‘file:///…’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

意即：跨域请求仅支持协议方案：http、data、chrome、chrome-extension、https。换句话说，认识访问本地文件是跨域行为，谷歌浏览器的安全机制会使得跨域失败。至于为什么，表示看了一些前人总结，我只总结出几句话“谷歌浏览器的安全策略，禁止ajax访问本地的文件，这是不安全的不被允许的”。

经测试，火狐、IE都是可以访问本地ajax文件，没有跨域问题的。

解决谷歌浏览器需要请求本地json文件：

1、jsonp（jsonp请求本地与请求其他服务器有不一样的用法）

2、项目中使用nginx反向代理（自行了解，nginx是个不错的代理服务器）

3、在webstorm中打开（webstorm中自带了一个本地服务器，会在浏览器中开一个端口）

4、修改谷歌浏览器的配置（不知怎么修改，且不实用）

综上，此处采取最经常实用的jsonp请求，经过自己实践和总结直接写出经验：ajax是无法在谷歌之下请求到本地文件的，与jsonp的配合也是用在访问其他服务器。

jsonp请求json文件方法：

1、jsonp请求本地json文件

不知道大家在使用script的src属性引入CDN文件的时候，有没有注意到这是一个不用考虑跨域的请求其他服务器并成功获取文件的方式。所以，请求本地文件就是使用“script的src + jsonp方式”，具体用法如下：

json文件

callbackFun（{
    "data": [{
        "id": 1,
        "name": "z"
    },{
        "id": 2,
        "name": "m"
    }]
}）
// 此处的callbackFun与下面的函数名对应

html页面中

<script type="text/javascript">
	function callbackFun (data) {
        console.log(data);
	}
</script>

<script src="./data.json?callback=callbackFuc"></script>
// callback代表json的回调函数，callbackFun为回调函数名，及你要进行处理数据的函数名
// callbackFun回调函数必须放在前面

2、jsonp + ajax请求其他服务器文件

$.ajax({
    async : true,
    url : "https://xxx/xx/xx",
    type : "GET",
    dataType : "jsonp", // 返回的数据类型，设置为JSONP方式
    jsonp : 'callback', //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback
    jsonpCallback: 'handleResponse', //设置回调函数名
    data : {}, 
    success: function(response, status, xhr){
        console.log('状态为：' + status + ',状态是：' + xhr.statusText);
        console.log(response);
    }
});

// 也可以通过getJSON
$.getJSON("https://xxxx?xx=xx&xx=xx&callback=?", function(data){
                console.log(data);
 });