AxiosError {message: ‘Network Error‘,..跨域问题

最新推荐文章于 2025-10-27 17:02:07 发布

原创最新推荐文章于 2025-10-27 17:02:07 发布 · 1w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#java #json #开发语言 #vue #echarts

在尝试通过axios获取本地JSON文件以显示中国和世界地图时遇到问题。使用相对路径修正了中国地图的URL，成功显示了中国地图。然而，尝试获取世界地图时出现404错误。问题可能在于请求的资源未找到，需要检查URL的正确性或确保文件存在于指定路径。

我想获取中国地图，结果报错

  const ret = await axios.get('http://127.0.0.1:8999/static/map/china.json')

问题在于：不能使用绝对地址，用相对地址，改成

const ret = await axios.get('http://localhost:8999/static/map/china.json')
console.log(ret)

想要显示中国地图，对其进行注册

const ret = await axios.get('http://localhost:8999/static/map/china.json')
console.log(ret)
this.$echarts.registerMap('china', ret.data)
const initOption = {
     geo: {
              type: 'map',
               map: 'china'
           }
 }
this.chartInstance.setOption(initOption)

显示图片如下：

想显示全球的地图

const ret = await axios.get('http://localhost:8999/static/map/world.json')
console.log(ret)
this.$echarts.registerMap('world', ret.data)
const initOption = {
     geo: {
             type: 'map',
             map: 'world'
    }
}
this.chartInstance.setOption(initOption)

如果报错

Uncaught (in promise) AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}