React+Spring MVC本地Nginx代理后端接口失败求助

你遇到的核心问题是Nginx没有正确将前端的API请求转发到Tomcat后端，反而把API路径当成静态资源去React的build目录里查找，导致无法获取数据。之前的错误配置应该是误将根路径的location /改成了代理，导致静态资源（CSS/JS）也被转发到Tomcat，所以返回了无样式的JSP内容。

下面是具体的修复步骤：

1. 修改Nginx配置，添加API反向代理规则 #

在你的Nginx server块中，新增一个专门匹配后端API路径的location块，只转发接口请求，静态资源仍然指向React的build目录。

修改后的server配置如下：

server {
    listen 8081;
    server_name localhost;

    # 处理React静态资源（保持原配置不变）
    location / {
        root html/build;
        index index.html index.htm;
        # 可选：解决React Router刷新404的问题（如果用了BrowserRouter）
        try_files $uri $uri/ /index.html;
    }

    # 新增：转发所有/comment开头的请求到Tomcat后端
    location /comment {
        proxy_pass http://localhost:8080/example_war_exploded/;
        # 必要的代理头信息，确保后端能正确处理请求
        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_set_header X-Forwarded-Proto $scheme;
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root html;
    }
}

2. 配置说明 #

• location /：继续负责处理React的静态资源和首页访问，try_files是可选配置，如果你使用了React Router的BrowserRouter，刷新页面时需要这个规则避免404错误。
• location /comment：匹配所有以/comment开头的请求（比如你的/comment/comments接口），将其转发到Tomcat的部署路径http://localhost:8080/example_war_exploded/。Nginx会自动把/comment/comments拼接在proxy_pass的URL后面，最终转发地址为http://localhost:8080/example_war_exploded/comment/comments，完全匹配你的Spring MVC控制器路径。
• 代理头信息：这些proxy_set_header配置是为了让后端服务能正确获取请求的原始信息（比如客户端IP、请求协议等），避免某些后端逻辑因缺少这些头而报错。

3. 重启Nginx并测试 #

修改配置后，重启Nginx服务：

# macOS上重启Nginx的命令（根据安装方式可能略有不同）
sudo nginx -s reload

然后访问localhost:8081，测试前端的Axios请求是否能正常获取后端数据。

额外优化提示 #

如果你的后端有多个不同前缀的API，可以统一用一个前缀（比如/api）来管理，这样Nginx的配置更简洁：

• 修改Spring MVC控制器的@RequestMapping为@RequestMapping("/api/comment")
• 前端Axios请求改为axios.get("/api/comment/comments")
• Nginx配置改为location /api { proxy_pass http://localhost:8080/example_war_exploded/; ... }

这样后续新增接口时不需要修改Nginx配置，更易于维护。

内容的提问来源于stack exchange，提问作者Sky