通过配置nginx的反向代理，配置统一的后台访问链接_nginx代理后端接口

起因

前端应用程序通过axios，调用后端的服务。在vite中，通常会通过配置proxy来绑定服务的IP和端口号。同时，也可以修改它的相对地址。
举个例子说明一下：
在vite.config.js中，设置了如下的代码：

server: {
  port: 7071,
  host: "0.0.0.0",
  open: true,
  proxy: {
    '/dev-api': {
      target: 'http://localhost:7070',
      changeOrigin: true,
      rewrite: (p) => p.replace(/^\/dev-api/, '')
    }
  },
}
1
2
3
4
5
6
7
8
9
10
11
12

这里，向服务器的7071端口发送的请求，会转发给localhost:7070，同时去掉请求的相对链接:/dev-api
例如：http://xxxxx.xxx:7071/dev-api/getInfo 请求，会转发给http://localhost:7070/getInfo
上面是开发环境。

生产环境

如果在生产环境中，前端代码会编译成html&JS。那么，我们配置nginx服务器，上述的/dev-api会变成/prod-api，但是我们想向后端发送的http://xxxxx.xxx:7071/prod-api/getInfo 请求转化成http://localhost:7070/getInfo，那么该怎么做呢？
我们需要在nginx的配置文件中，配置反向代理和重定向完成上述的配置。
相对应的生产环境配置如下：

location /prod-api/
{
    # 这是替换prod-api为""，它对应上面proxy中的rewrite字段
    rewrite ^/prod-api(.*)$ $1 break;
    # 这是设置IP和端口,它对应上面proxy中的target字段
    proxy_pass http://localhost:7070;
}
1
2
3
4
5
6
7

上面的例子是通过.env.production和.env.development文件配置的的生产环境和开发环境的接口参数。