vite配置proxy代理单个、多个代理配置。多个代理配置踩坑

单个后台服务

const instance = axios.create({
    baseURL: '/api',
    timeout: 120000
})

server: {
    host: '0.0.0.0',
    proxy: {
        '/api': {
            target: 'http://127.0.0.1:8093',
            changeOrigin: true, // 允许跨域
            ws: true, // 允许websocket代理
            // 重写路径 --> 作用与vue配置pathRewrite作用相同
            rewrite: path => path.replace('\/api'), '')
        }
    }
}

通过以上的配置，例如发起下面的请求

export const addData = async (data: any) => {
    return await Request.post(`/addressbook/add`, data)
}

实际上的请求路径就是：

http://127.0.0.1:8093/addressbook/add 

多个后台服务

很多时候无法避免的需要请求多个后台服务

例如：

• 模块A 后台地址 http://127.0.0.1:8093
• 模块B 后台地址 http://127.0.0.1:8088
  这时候就两个代理配置。
  如下代码： "/cygl/api/cyfx" 和 "/cygl/api" 两个代理配置。
  如果将"/cygl/api/cyfx"放到"/cygl/api"的下边，那么"/cygl/api/cyfx"代理将会失效。

因为他们的前置路径一样。会先行匹配掉/cygl/api 在进行下一个代理。这时候就只剩下cyfx了。是不会匹配成功的。

server: {
    https: false,
    proxy: {
      "/cygl/api/cyfx": {
        target: "http://127.0.0.1:8093",
        changeOrigin: true, // 允许跨域
        rewrite: (path) => path.replace(/^\/cygl\/api\/cyfx/, ""),
      },
      "/cygl/api": {
        // 配置需要代理的路径 --> 这里的意思是代理http://localhost:80/api/后的所有路由
        target: "http://127.0.0.1:8088",
        changeOrigin: true, // 允许跨域
        ws: true, // 允许websocket代理
        // 重写路径 --> 作用与vue配置pathRewrite作用相同
        rewrite: (path) => path.replace(/^\/cygl\/api/, ""),
      },
      
    },
  },