Vue项目使用axios时的跨域虚拟服务器设置

前言

由于浏览器的安全策略，当我们想在开发环境前后端联调的时候总是会有跨域的问题，解决这个问题前后端都有方法，此文说一下前端方法

需要工具

axios插件

步骤一（/config/index.js文件）

代码

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/apiC': {
        target:'http://localhost:62119/', // 你请求的第三方接口
        changeOrigin:true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRewrite:{  // 路径重写，
          '^/apiC': ''  // 替换target中的请求地址
        }
      }
    },

一般来说配置这个部分应该就可以了，接下来只要在请求当中添上apiC的请求头就可以
如下

this.axios.post('/apiC/xxx/xxx',{
        startT:this.startTimeDate,endT:this.endTimeDate,
      }).then(res => {
        console.log(res)
      }).catch(err => {
        console.log(err);
      })

而如果不想每次都手敲apiC的话，可以接着设置如下部分，可以使每次请求自带apiC头，从而自动替换

步骤二（扩充设置main.js）

添加如下代码，为保证只在开发模式下启用此功能，添加一个判断，但起作用的是里面的代码

if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = '/apiC/'
}

结语

目前我用的到步骤二，直接添加前缀的我没测试，不过应该没问题，有问题的话，我推荐你用步骤二