json文件引入外部数据为什么报错？

Question

json文件引入为什么报错？

画了个地图，地图json本来是在我本地的，但是由于数据太多，就放在我们公司服务器上面了
看报错信息

点击这个链接是能出现json数据的

看代码
使用axios 时候回报跨域错误，
我的背景图片就在这个服务器上面，是正常访问的

 creatEchart(obj) {
      // let factorys = this.getMockData(obj)
      let factorys = this.getLocationData(this.shopLocation)
      let that = this
      // 获取地图数据
      // let mapData = require(`@/assets/json/${obj}.json`);  // 本地访问正常
      let mapData = require(`${jsonUrl}/${obj}.json`) // 远程访问不对，无法加载
      // let mapData =require( 'https://geo.datav.aliyun.com/areas_v3/bound/130000_full.json')
      // axios.get(`${jsonUrl}/${obj}.json`).then(res=>{
      //   console.log(res)
      // })

      // 注册自定义地图类型, 类型名称, 地图数据
      echarts.registerMap("empchina", mapData);
    
      // 配置项
      this.$emit('sendMapData', factorys)
    },

各位大佬，求助，如何访问这个远程json

Answer 1

感觉是 json 没有对应的 loader 吧。

也就是资源确实存在，但是没办法当成 module 解析。

其实这里可以考虑 ajax 解析，然后 json 直接放在 public 里面。这样处理的时候也不用处理这些资源，而且后面也可以维护在 cdn 上

Answer 2

试试

const { default: data } = await import(url, { assert: { type: "json" } });
console.log(data);

不过有两点需要注意：

1. 本质上它也是用的 fetch，可能也会存在跨域的问题（所以要试试）
2. 可能需要比较新的浏览器才支持