Nginx反向代理配置的坑，相信你一定踩过！

一、序言

做过前端开发的同学都知道，使用Vue-CLI或者Vite开发与后端联调时，可以通过构建工具支持的代理配置将请求代理到后端服务。

下面是使用Vue-CLI开发时与后端调试的代理配置，以api开头的请求会被路由到http://localhost:8000上。

 devServer: {
    host: 'localhost',
    port: 9000,
    compress: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8000',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }

举个例子，当访问/api/ah-counter/report时，该请求最终会路由到http://localhost:8000/ah-counter/report上，api前缀在代理到后端服务时会被重写为空字符串。

当把前端项目部署到Nginx上时，需在Nginx上配置后端服务的反向代理，这时一不小心坑就来了。

---

二、proxy_pass斜杠的坑

在使用proxy_pass指令时，针对URL中是否包含URI，Nginx服务器的处理方式不一样。

• 如果URL中不包含URI，Nginx服务器不会改变原地址的URI。
• 如果URL中包含了URI，Nginx将会使用新的URI替代原来的URI。

举个例子：

server {
   listen 80;
   server_name  mysite.com;
}
location /api/  {
   proxy_redirect off;
   proxy_set_header Host $host;
   proxy_set_header X-Real-IP $remote_addr;
   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
   proxy_pass http://localhost:8000;
}

当访问http:/mysite.com/api/ah-counter/report时，最终请求会路由到http://localhost:8000/api/ah-counter/report上。

如果我们修改下proxy_pass的配置，在后面加个斜杠/，如下：

location /api/  {
   proxy_redirect off;
   proxy_set_header Host $host;
   proxy_set_header X-Real-IP $remote_addr;
   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
   proxy_pass http://localhost:8000/;
}

这时再访问http:/mysite.com/api/ah-counter/report时，请求会路由到http://localhost:8000/ah-counter/report上，前面的/api前缀会被去掉。

备注：加上URI后，就实现了类似前端构建工具路径重写的效果。

---

三、负载均衡配置的坑

当后端服务是一个集群时，我们通过upstream来指定服务组，如下：

upsteam backend {
   server http://localhost:8001/;
   server http://localhost:8002/;
   server http://localhost:8003/;
}
server {
   listen 80;
   server_name  mysite.com;
}
location /api/  {
   proxy_redirect off;
   proxy_set_header Host $host;
   proxy_set_header X-Real-IP $remote_addr;
   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
   proxy_pass backend;
}

当在proxy_pass中使用服务组名称时要注意一个细节，如果组内的各个服务都指明了传输协议，在proxy_pass中就不需要指明了。

如果将upstream指令的配置改一下，如下：

upsteam backend {
   server localhost:8001/;
   server localhost:8002/;
   server localhost:8003/;
}

这时我们需要在proxy_pass指令中指明传输协议，否则代理会失败，最终配置如下：

   proxy_pass http://backend;

资料截图如下：