前端解决vue-cli中axios请求本地json跨域问题

vue中使用axios请求API或其他域名地址时，会产生跨域请求问题，应该如何解决呢？（本文以请求example为例）

在本地用axios请求后端发布的json文件时会出现以下跨域报错

解决方法：

第一步：在根目录下vue.config.js文件（如果没有就新建个js文件来配置）

添加如下代码：

module.exports = {
  // 配置跨域代理
    devServer: {
        // Paths
       
        proxy: {
          '/example': { // 匹配所有以 '/example'开头的请求路径
            target: 'http://localhost:18001/', // 目标地址
            changeOrigin: true, // 支持跨域
            //pathRewrite: {// 重写路径: 去掉路径中开头的'/example'
             // '^/example': '/example'
            }
          }
        },
    }
}

注：'/example'意思是只要以/example开头的就直接请求代理服务器再到后端服务器。(视具体情况更改）。

由于此例对于路径并没有重写，所以进行了注释。

第二步：在HelloWorld的axios请求中的url做如下修改：

 axios({
      method: 'get',
      url: '/example/city/population?cityName=xian'//目标地址后接的详细地址
    }).then((res) => {
      var Xdata = []
      var Sdata = []
      for (var i = 0; i < res.data.data.length; i++) {
        var item = res.data.data[i]
        Xdata.push(item.cityName)
        Sdata.push(item.population)
      }
      //   提出来console.log(Xdata)

      option.xAxis.data = Xdata
      option.series[0].data = Sdata

      myChart.setOption(option)
    })

（注释：

1.原请求地址 http://localhost:18001/example/city/population?cityName=xian

2.target后面的就是需要请求的网址的公共部分，然后用/example来代理这个，最后重写一些路径，请求的时候使用的我们的代理的example来作为前缀。这个前缀我们可以自定义，proxyTable是对象，所以我们可以配多个代理。跨域解决）

由于vue-cli3 脚手架中，项目目录中没有 vue.config.js 文件，需要手动创建
新建一个vue.config.js，配置信息，同样可以解决。

修改了配置文件之后，需要重新run一遍，不然不生效！