Nginx部署React应用仅单个API接口返回404问题求助

数据老陈

2026-6-14

排查React部署Nginx后单个API接口404的问题

先从最直接的点开始排查：

验证接口本身是否可用
打开浏览器DevTools的Network面板，找到这个404的请求，复制完整的URL直接在浏览器地址栏访问。如果直接访问也返回404，说明问题出在后端接口本身（路径错误、服务未部署等），和Nginx无关；如果直接访问正常，再往下排查。
检查前端请求配置
对比这个接口和正常接口的代码：
- 确认域名、路径拼写完全正确（比如有没有把https://report.example.com/v2写成https://report.example.com/v1）
- 检查请求方法是否匹配后端要求（比如后端只支持GET，但前端发了POST）
- 确认是否遗漏了认证信息（token、Cookie），部分后端会把未授权请求返回404而非403

检查Nginx是否误拦截了请求
看前端对这个接口的请求路径：

如果前端用了相对路径（比如/export/data），而不是完整外部域名，那请求会打到你的Nginx服务器（http://你的服务器IP/export/data），但当前Nginx配置里没有对应的转发规则，所以返回404。这种情况需要给该接口添加反向代理规则，示例配置如下：

server {
    listen 80;
    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }
    # 假设前端请求路径是/export/data，真实后端地址是https://export.example.com/data
    location /export/data {
        proxy_pass https://export.example.com/data;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

修改配置后重启Nginx：nginx -s reload