React客户端请求无法到达Node.js服务器（Nginx部署）求助

问题详情 #

React客户端发起http://localhost/server/profile请求时无法连接到服务器，但手动访问http://[IP]/server/profile完全正常。

• 环境变量REACT_APP_REMOTE_SERVER_URL设为http://[IP]:50000/server时请求正常，设为http://localhost/server或/server时失败
• 已关闭防火墙、确认CORS配置无误，问题仍未解决

相关配置信息 #

Nginx配置 #

server {
  listen 80;
  location / {
        root /var/www/app/client;
        index  index.html index.htm;
        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;
        try_files $uri $uri/ /index.html;
  }

  location /server {
        proxy_pass  http://localhost:50000;
        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;
  }
}

Node.js服务端代码片段 #

const express = require("express");
const { corsConfig } = require("./controllers/serverController");
const app = express();
const helmet = require("helmet");
const cors = require("cors");

app.use(helmet());
app.use(cors(corsConfig));
app.use(express.json({ limit: '0.30mb' }));
app.use(cookieParser());

// Add "/server" prefix to routes
app.use("/server", authRouter);
app.use("/server/Profile", profileRouter);

console.log("node env: ", process.env.NODE_ENV);
const port = 50000;
server.listen(port, () => {
    console.log(`Server listening on port ${port}`);
});

问题根源与修复方案 #

核心问题 #

1. 路由前缀重复：Nginx将/server开头的请求代理到http://localhost:50000，但Node.js服务本身已经给路由加上了/server前缀，导致实际请求路径变成http://localhost:50000/server/server/Profile，服务端无法匹配到对应路由。
2. 路径大小写不匹配：客户端请求的是小写的/server/profile，但服务端路由定义的是大写的/server/Profile，Linux环境下路径严格区分大小写，直接导致请求失败。

具体修复步骤 #

修复1：调整Nginx代理配置（推荐）

修改Nginx中/server的proxy_pass配置，在末尾添加斜杠，让Nginx正确转发路径，避免前缀重复：

location /server {
        proxy_pass  http://localhost:50000/;  # 新增末尾斜杠
        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;
}

修改后，/server/profile会被转发到http://localhost:50000/profile，和服务端的/server/Profile组合后刚好匹配正确路由。

修复2：统一路径大小写

必须将客户端请求路径和服务端路由的大小写统一：

• 要么把客户端请求改为/server/Profile
• 要么把服务端路由改为/server/profile

修复3：验证配置并重启服务

1. 执行sudo nginx -s reload让Nginx配置生效
2. 重启Node.js服务，确保路由修改生效
3. 客户端设置REACT_APP_REMOTE_SERVER_URL="/server"，使用相对路径避免地址解析问题

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