Chrome-Ajax读取JSON报错 2018-12-19

因为一些需求需要读取本地的JSON文件内的数据,但发现在本地浏览器环境下使用Ajax、getJSON等方法读取目录下的json文件时,Chrome控制台报了以下错误:

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

可以看到访问桌面下的 1.json 文件的请求被阻止了,在后面给出了Chrome下支持的几种跨域请求协议格式,分别是http, data, chrome, chrome-extension, https,而本地桌面文件的访问协议是file开头的,Chrome下并不支持这种file协议。

解决方案:

1.将代码部署到服务器环境下运行(脱离本地环境)
2.JSONP

主要记录下第二种JSONP方法的具体实现方法:
在HTML文件中通过 <script> 标签将JSON文件引入进来,如下:

1
<script src="1.json"></script>

修改下1.json文件中的内容,制定一个函数,将原来的json数据作为函数参数,同时调用函数:

1
2
3
4
5
6
7
8
9
10
11
12
getData({
"news": [
{
"title": "新闻标题1",
"time": "2018-12-19"
},
{
"title": "新闻标题1",
"time": "2018-12-19"
}
]
});

在JS部分定义这个getData函数:

1
2
3
4
function getData(data){
// 拿到Data数据
console.log(data.news);
}

完整的代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
index.html
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
function getData(data){
// 拿到Data数据
console.log(data.news);
}
</script>
<script src="1.json"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1.json
---
getData({
"news": [
{
"title": "新闻标题1",
"time": "2018-12-19"
},
{
"title": "新闻标题1",
"time": "2018-12-19"
}
]
});