使用ApexCharts绘制COVID-19地图更换JSON数据源遇CORS报错如何解决

你遇到的报错和当前编写的图表绘制逻辑、组件配置没有关联，不属于代码缺失某段配置的问题：

• 错误核心是浏览器同源策略的CORS拦截机制：从本地localhost源发起的前端XMLHttpRequest请求，要读取跨域的第三方资源时，必须目标服务器返回Access-Control-Allow-Origin响应头才会允许内容被页面读取
• 你当前对接的ECDC公开数据源没有配置上述跨域放行规则，浏览器直接拦截了请求返回内容，因此连带触发了资源加载失败的net::ERR_FAILED报错
• 此前能正常加载的其他API，是因为服务器端本身开启了跨域访问放行，和你代码的写法没有关系

• 本地开发阶段配置请求代理
  不要直接在前端代码里请求外部第三方地址，把代码里的JSON请求路径替换为同域的本地路径，再在你使用的本地静态开发服务中配置转发规则，将该本地路径的请求代理转发到目标数据源地址。这种方式下请求由本地开发服务代为发起，不会触发浏览器的跨域限制。
• 静态化存储数据源文件
  手动获取目标JSON的完整内容，存到项目的本地静态资源目录中，将代码中anychart.data.loadJsonFile的请求地址替换为本地静态文件的相对路径即可。这种方式完全规避跨域问题，适合演示类项目快速调试使用。
• 线上部署时增加后端转发层
  如果项目需要公开上线，不要在前端代码中直接请求未开放跨域权限的第三方数据源，在项目的服务端层增加一层简单的接口转发逻辑，由后端请求目标数据源拿到内容后，再返回给前端图表组件调用。

不要尝试在前端代码中添加所谓的“CORS绕过配置”——比如修改请求模式为no-cors、强行添加跨域请求头，这类操作要么会导致拿到的响应为不透明状态无法读取，要么根本不会绕过浏览器拦截，属于完全无效的操作。

内容的提问来源于stack exchange，提问作者Imad Alrefai