配置Nginx对接React与Spring后端时，API调用失败求助

从日志可以明确：Nginx没有将/api开头的请求转发到Spring后端，而是默认把所有请求当作静态资源在/usr/share/nginx/html目录下查找，导致API请求返回404。

解决步骤 #

1. 修正Nginx反向代理配置 #

编辑你的spring.conf文件，添加针对/api路径的反向代理规则，示例配置如下：

server {
    listen 80;
    server_name localhost;

    # 托管React静态资源
    root /usr/share/nginx/html;
    index index.html;

    # 转发所有/api开头的请求到Spring后端
    location /api/ {
        # 替换为你的Spring后端实际地址（如http://192.168.1.100:8080/ 或 Docker容器名:端口）
        proxy_pass http://your-spring-backend:8080/;
        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;
    }

    # 处理React单页应用路由刷新404问题（可选但推荐）
    location / {
        try_files $uri $uri/ /index.html;
    }
}

注意：proxy_pass末尾的斜杠决定了路径拼接方式：

• 如果后端接口是http://xxx:8080/api/gameType/getAll，则proxy_pass设为http://xxx:8080/
• 如果后端接口是http://xxx:8080/gameType/getAll，则proxy_pass设为http://xxx:8080（不带斜杠）

2. 重新加载配置 #

执行以下命令更新容器内的配置并重启Nginx：

docker cp spring.conf gagu-react:/etc/nginx/conf.d/spring.conf
docker exec gagu-react nginx -s reload

3. 验证配置生效 #

进入容器查看Nginx完整配置，确认反向代理规则已加载：

docker exec gagu-react nginx -T

搜索/api/，检查是否存在对应的location配置块。

4. 额外排查点 #

• 如果Spring后端也用Docker部署，确保Nginx容器和后端容器在同一个Docker网络中，否则需要使用后端服务的可访问IP地址。
• 确认React应用的API请求路径是/api/xxx格式，而非直接写后端地址（依赖Nginx反向代理转发）。

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