Vue中配置axios跨域多个proxyTable代理

vue.config.js

配置参考：https://cli.vuejs.org/config/#devserver-proxy

devServer: {
  open: true,
  port: 8081,
  proxy: {
    //匹配/gw1-api开头的请求
    [process.env.VUE_APP_GW1_BASE_API]: {
      //目标服务器，代理访问到https://localhost:8080
      target: process.env.VUE_APP_GW1_URL,
      // 开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，
      // 并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
      changOrigin: true, //开启代理
      pathRewrite: {
        // 会将 /gw1-api 替换为 '',也就是 /gw1-api 会移除，
        // 如 /gw1-api/db.json 代理到 https://localhost:8080/db.json
        // '^/gw1-api': "",
        ["^" + process.env.VUE_APP_GW1_BASE_API]: ""
      }
    },
    //匹配/gw2-api开头的请求
    [process.env.VUE_APP_GW2_BASE_API]: {
      //目标服务器，代理访问到https://localhost:8080
      target: process.env.VUE_APP_GW2_URL,
      // 开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，
      // 并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
      changOrigin: true, //开启代理
      pathRewrite: {
        // 会将 /gw2-api 替换为 '',也就是 /gw2-api 会移除，
        // 如 /gw2-api/db.json 代理到 https://localhost:8080/db.json
        // '^/gw2-api': "",
        ["^" + process.env.VUE_APP_GW2_BASE_API]: ""
      }
    },
  }
},

.env

# 使用 VUE_APP_ 开头的变量会被 webpack 自动加载
# 定义请求的基础URL, 方便跨域请求时使用

VUE_APP_GW1_BASE_API = '/gw1-api'
VUE_APP_GW2_BASE_API = '/gw2-api'

# 接口服务地址（网关地址）
# 可更改为自已配置的 Easy-Mock 接口服务地址

VUE_APP_GW1_URL = 'http://192.168.1.10:8001/gateway'
VUE_APP_GW2_URL = 'http://192.168.1.10:8002/gateway'

api

export function test1(data) {
  return request({
    url: '/gw1-api/test1',
    method: 'post',
    data,
  });
}
export function test2(data) {
  return request({
    url: '/gw2-api/test2',
    method: 'post',
    data,
  });
}