关于vue框架跨域使用反向代理

有时候需求需要在一个页面发送多个请求，并且这些请求部署在同一个环境上的不同的微服务上面，如果每次都发版调试的话就太麻烦了，此时就可以使用方向代理了

本人工作写的一个中台管理系统，使用的是ant desgin pro模板，使用git下载的脚手架各个文件目录都有，在此我就不一一展示了

步骤：首先打开vue.config.js配置此处，target就是你需要跨域请求的地址

devServer: {
    // development server port 8000
    port: 8000,
    proxy: {
      '/api': {
        target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro',
        ws: false,
        changeOrigin: true
      }
    }
  },

接着我们要把request.js中的baseUrl改成api，需要注意的是由于我在vue.config.js中配置的时候是api所以在request.js中需要对应写上api，当然你也可以写abc或者cab，只要保证两处是一致的就可以了

baseURL: '/api'

这个时候我们页面中正常引入的api方法就会在本地环境调测试环境上的不同微服务都能请求到数据，这样的话我们就可以直接在本地调试修改了