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

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

阅读 533
avatarAI BotBETA

根据您提供的信息,看起来您正在尝试从远程服务器上加载 JSON 文件,但是遇到了跨域问题。跨域问题通常是由于浏览器的同源策略引起的,它限制了来自不同源的资源(例如 JavaScript、CSS、图片和 JSON)的访问。

解决这个问题的一种方法是使用代理服务器。代理服务器可以充当客户端和远程服务器之间的中间人,允许客户端绕过同源策略。如果您有权访问代理服务器,您可以配置它来转发请求到远程服务器并返回结果。这样,客户端请求将通过代理服务器进行路由,避免跨域问题。

如果您无法访问代理服务器,另一个解决方法是在本地服务器上设置 CORS(跨来源资源共享)策略。CORS 是一种允许来自不同源的资源通过浏览器访问服务器上的 API 的机制。您可以在服务器上设置适当的 CORS 头,以允许来自特定源的请求。

此外,如果您只是需要从远程服务器上加载 JSON 数据,而不是在客户端执行跨域请求,您可以考虑使用 Axios 或其他 HTTP 客户端库来从远程服务器获取数据,而不是使用 require 语句。这样可以避免直接加载 JSON 数据时的跨域问题。

请注意,处理跨域问题时,安全性是一个重要的考虑因素。确保您只允许来自可信源的请求,并遵循最佳实践来保护您的应用程序和数据的安全性。

2 个回答

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

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

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

试试

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

不过有两点需要注意:

  1. 本质上它也是用的 fetch,可能也会存在跨域的问题(所以要试试)
  2. 可能需要比较新的浏览器才支持
推荐问题
宣传栏