vue 前端设置跨域多代理

在项目开发的时候经常会遇到后端提供的多个服务请求地址域名或端口号不一致的情况这时候就需要前端设置多个proxy跨域代理，本文以vue-element-admin为例展示步骤如下：
1: 配置环境变量 .env.development

# just a flag
ENV = 'development'

# base api
VUE_APP_BASE_API = ''
# proxy api
VUE_APP_BASE_API_PROXY = '/proxy-api'

2: 配置项目根目录下的vue.config.js 找到devServer

devServer: {
        port: port,
        open: true,
        historyApiFallback: true,
        overlay: {
            warnings: false,
            errors: true
        },
        proxy: {
            [process.env.VUE_APP_BASE_API_PROXY]: {
                target: "http://172.16.xx.xxx:8099/", // 后台给的需要跨域请求的接口地址
                ws: true,
                changeOrigin: true, // 请求跨域时，需配置此项
                pathRewrite: { // 路径重写,替换target中的请求地址
                    ["^" + process.env.VUE_APP_BASE_API_TMES]: "",
                },
            },
       
            [process.env.VUE_APP_BASE_API]: {
                target: "http://172.16.xx.xxx:8090/", // 后台给的需要跨域请求的接口地址
                ws: true,
                changeOrigin: true, // 请求跨域时，需配置此项
                pathRewrite: { // 路径重写,替换target中的请求地址
                    ["^" + process.env.VUE_APP_BASE_API]: "",
                },
            },
        },
        // before: require('./mock/mock-server.js'), mock server 这行不注释的话不起效哦～
    },

PS：注意VUE_APP_BASE_API 放在数组的最后一个，如果你VUE_APP_BASE_API跟我一样设置为'' 的话，这样才不会被代理的虚拟path覆盖！

3: 找到项目中管理请求地址的文件 src/api/proxy.js （proxy.js 是我随便起的名字）

image.png

打开proxy.js

import request from '@/utils/request'
const proxy_api = process.env.VUE_APP_BASE_API_PROXY
const url = (path) => (proxy_api + path)
export function fetchList(params) {
  return request({
    url: url('/xx/xxx/fetch/list'),
    method: 'post',
    data: params
  })
}

proxy_api 就是你之前在步骤1：中定义的虚拟path
VUE_APP_BASE_API_PROXY = '/proxy-api'
const url = (path) => (proxy_api + path) 一个路径处理函数，参数是'/xx/xxx/fetch/list'，return (proxy_api + path)

需要额外注意的是我在配置环境变量 .env.development的时候基础api设置的是空：

image.png

所以不需要在src/utils/request.js 中对代理的请求进行拦截

image.png

如果你为VUE_APP_BASE_API设置了虚拟path路径，那么就需要在src/utils/request.js为这个虚拟路径配置拦截，比较麻烦比不建议这么做。

至此跨域多代理已经设置完了，本文中设置两个代理一个基础代理VUE_APP_BASE_API，一个额外代理VUE_APP_BASE_API_PROXY，默认情况下走基础代理，当请求匹配到匹'/proxy-api' 时走额外代理～