前端代理映射配置？

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

需要在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;    }}

Answer 2

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

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