生产环境React HTTP请求无法抵达Node.js后端问题求助

本地开发时，React项目package.json中的proxy配置可正常转发请求到Node.js后端，但部署到生产服务器后，前端请求/api/posts返回404，Nginx日志显示该请求触发404。通过curl http://127.0.0.1:5500/api/posts可正常获取数据，推测Nginx代理未生效。

关键代码/配置片段 #

前端React请求代码 #

export default function SinglePost() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const fetchPosts = async () => {
      try {
        const response = await axios.get('/api/posts');
        setPosts(response.data);
      } catch (error) {
        console.error('Error fetching posts:', error);
      }
    };

    fetchPosts();
  }, []);
}

后端路由配置（postsTest.js） #

app.get('/api/posts', (req, res) => {
    const singlePostId = req.query.postId;

    if (singlePostId) {
      const matchPost = posts.find((post) => post.id === singlePostId);
      if (matchPost){
        res.json(matchPost);
      } else {
        res.status(404).json({message: 'Post Not Found'});
      }
    } else {
      res.json(posts);
    }
});

原Nginx配置 #

server {
        listen 81;
        server_name 111.11.111.11;

        root /home/bob/webname/webnames/client/build;
        index index.html;

        location / {
                try_files $uri $uri/ =404;
        }

        location /api {
                proxy_pass http://localhost:5500/;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
        }
}

解决方案 #

1. 修正Nginx的proxy_pass配置 #

当前proxy_pass末尾的斜杠是问题核心：带斜杠时，Nginx会把/api后的路径直接拼到目标地址后，即/api/posts会被转发到http://localhost:5500/posts，但后端路由是/api/posts，导致匹配失败返回404。

修改后的Nginx配置：

location /api {
        proxy_pass http://localhost:5500;  # 移除末尾斜杠
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
}

2. 验证配置并重启Nginx #

先检查配置语法是否正确：

sudo nginx -t

若输出test is successful，重启Nginx使配置生效：

sudo systemctl restart nginx

3. 明确React生产环境proxy配置无效 #

React的package.json中的proxy仅在开发环境（npm start）起作用，生产构建（npm run build）后该配置不会被打包到静态文件中，必须依赖Nginx等反向代理实现API转发，当前的代理思路是正确的，只需修正Nginx配置即可。

4. 日志排查（若问题仍存在） #

查看Nginx访问日志和错误日志，确认请求转发情况：

# 实时查看访问日志
sudo tail -f /var/log/nginx/access.log
# 实时查看错误日志
sudo tail -f /var/log/nginx/error.log

通过日志可确认请求是否被正确转发到后端5500端口，以及后端的响应状态。

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