前端代理映射配置？

Question

背景：

vue3+vite项目中：前后端联调的时候，
代理转发设置成功，但是由于接口文件中有多个文件,一个个加代理配置比较麻烦，所以想着给接口增加前缀的方式去统一设置代码

比如接口文件中有如下两个接口，url分别如下

'/chekTicketData/list'，
'/getManagerData/page'，

统一增加前缀/sys

'/sys/chekTicketData/list'，
'/sys/getManagerData/page'，

在本地.env.development文件中统一配置设置转发

VITE_PROXY = '[
  ["/api/sys", "http://10.9.33.8:10049"]
]'

接口可以正常响应，但是这个/sys是自己自定义的,而且这个设置是在.env.development。请问下要在项目的测试环境和生产环境做映射吗？映射/sys对应的服务

Answer 1

前端代码里面加下环境判断增减前缀就行了，测试环境和生产环境都不用动。

const apiPrefix = import.meta.env.MODE === 'development' ? '/sys' : '';

`${apiPrefix}/chekTicketData/list`，

也可以直接在你的请求工具中加（比如axios），这样就不用每个接口上加前缀了。

如果/sys是前端单方面加的，需要使用rewrite去掉：

{
  '/api': {
    target: 'http://jsonplaceholder.typicode.com',
    changeOrigin: true,
    rewrite: (path) => path.replace(/^\/api/, '')
  }
}

https://www.vitejs.net/config/#server-proxy

Answer 2

需要在nginx侧做映射。
比如你本地的proxy是如下

VITE_PROXY = '[
  ["/sys", "http://10.9.33.8:10049"]
]'

那么nginx就需要做如下配置

server {
    listen       8066;

    location /sys {
        proxy_pass http://10.9.33.8:10049;
    }
}