Nginx反向代理踩坑记录：一个“/”引发的接口404问题排查全过程

一、问题背景

访问流程

用户浏览器
      |
      |
    Nginx :80
      |
      |
  ----------------
  |              |
 Vue静态资源     Spring Boot API
                :8080

Nginx负责：
静态资源代理
后端接口转发

二、问题现象

1. 前端页面：访问正常；但是调用后台接口：GET /api/xxxx; 返回：404 Not Found;

2. 检查：浏览器 Network：
   Request URL:http://123.xx.xx.xx/api/aaaa
   状态：404

3. 后端直接访问：curl localhost:端口/api/aaaa
   正常。

4. 说明：
   问题不是 Spring Boot，而是 Nginx 转发。

三、错误配置分析（核心）

例如错误配置：

server {

    listen 80;

    location / {
        root /usr/share/nginx/html;
        index index.html;
    }


    location /api {
        proxy_pass http://backend:8080;
    }

}

很多人认为：

/api/articles

会自动转发：

backend:8080/api/articles

location匹配

Nginx：
  location /api

匹配：
/api
/api/user
/api/article

proxy_pass 是否带 / 影响路径。

但是：proxy_pass 是否带 /影响路径。

情况1

location /api/ {
    proxy_pass http://backend:8080/;
}

请求：/api/articles
转发：backend:8080/articles

情况2

location /api/ {
    proxy_pass http://backend:8080;
}

请求：/api/articles
转发：backend:8080/api/articles

这里就是很多人的误区：

以为 Nginx 只是简单转发，实际上 proxy_pass 会根据 URI 是否存在进行路径重写。

四、最终解决方案

修改前：

location / {
    proxy_pass http://backend:8080/;
}

修改后：

location /api/ {
    proxy_pass http://backend:8080;
}

之后重启服务

五、为什么之前一直没发现？

例如：

本地开发环境中，Vue通过Vite代理解决跨域问题，接口路径由开发服务器处理，因此没有暴露Nginx路径问题。

部署到服务器：

Vue
 ↓
Nginx
 ↓
Spring Boot

之后：

Nginx成为新的请求入口。
所以生产环境暴露问题。

六、以后配置Nginx需要注意什么

1. location匹配规则不要靠猜

2. proxy_pass最后的 / 非常重要

proxy_pass http://server; 
和：
proxy_pass http://server/;
不是一回事。

3. 修改配置先验证

不要直接：nginx -s reload
先：nginx -t

七、总结

这次问题表面上只是Nginx配置中的一个路径问题，但实际上暴露了自己对于location匹配规则和proxy_pass路径处理机制理解不足。通过这次排查，也认识到生产环境中的问题不能只关注应用本身，而需要从请求链路整体分析。