Echarts问题

Echarts问题

Ajax跨域调用数据的问题，Echarts ajax无法调用到json文件或者数据

1. 报错信息

Access to XMLHttpRequest at ‘file://?callback=success_jsonpCallback&_=1640779886186’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

2. 问题分析

这个项目是想利用Echarts做一个中国地图的展示，由于地图中的城市想要完整的展示出来就需要在地图上为每一个城市"打上一个"坐标，如下图

数据太多就展示一部分。地图的标点数据太多就只能另存为一个json文件然后尝试通过Ajax来请求这些数据，下面是具体的代码

$.ajax({
type: "get",
async: true, 
url: "../data/city_data.json", //请求发送到
dataType: "json", //返回数据形式为json
// jsonp: "callback",
// jsonpCallback:"success_jsonpCallback",
success: function(result) {
    geoCoordMap = result;
    myChart.hideLoading(); //隐藏加载动画
},
error: function(errorMsg) {
	alert("图表请求数据失败!");
	myChart.hideLoading();
},
});

然后点index.html一运行就坏了就出现了上面报错然后没有办法请求到数据，根据报错其实就是同源策略的原因不允许js代码直接访问本地的文件具体什么是同源策略可以自行百度，但是这个在今年6月份的时候还是可以正常运行的真的是很玄学了。

3. 问题的解决

把项目代码放到本地服务器上然后就可以了，我这里采用的是phpstudy还有其他多种开本地服务的方法，因为我本身电脑有phpstudy的环境然后就直接把代码放到WWW的目录下测试访问json数据文件如果可以访问到数据就证明成功了。

4. 参考

前端读取本地json文件跨域错误(Access to XMLHttpRequest at “.“ from origin ‘null‘ has been blocked by CORS policy)

echarts本地调试调用JSON地图无法显示问题处理