Nginx 1.25反向代理新增React客户端域名出现502 Bad Gateway错误

核心问题定位 #

从Nginx错误日志可直接定位原因：

connect() failed (111: Connection refused) while connecting to upstream, upstream: "http://127.0.0.1:3000/"

Nginx无法连接本地3000端口的服务，这是触发502错误的直接诱因。

分步排查与解决 #

1. 确认3000端口运行状态 #

在服务器执行命令，检查端口是否被监听：

netstat -tulpn | grep 3000
# 或使用ss命令
ss -tulpn | grep 3000

若无输出，说明3000端口无服务运行——生产环境下React不应依赖npm start启动的开发服务器，正确做法是构建静态文件后由Nginx直接托管。

2. 正确部署React生产环境 #

步骤1：构建React静态文件

在项目目录执行构建命令：

cd your-react-project
npm run build

构建完成后生成build文件夹，包含所有静态HTML/CSS/JS资源。

步骤2：修改Nginx配置托管静态文件

替换domain2nd.com的Nginx配置，将location /指向React的build目录（示例路径为/var/www/domain2nd-react/build）：

server {
   listen       80;
   server_name www.domain2nd.com domain2nd.com;

   # 直接托管React静态文件
   root /var/www/domain2nd-react/build;
   index index.html;

   location / {
     try_files $uri $uri/ /index.html; # 处理React单页路由刷新问题
   }

   location /api { # 转发API请求到Node.js服务
     proxy_pass http://127.0.0.1:5000;
     proxy_set_header X-Real-IP $remote_addr;
     proxy_set_header Host $host; # 新增：确保Node服务识别请求域名
     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
   }
}

3. 修复Node.js的CORS配置 #

当前CORS仅允许http://localhost:3000，需新增domain2nd.com的域名：

const corsOptions = {
    origin: ['http://localhost:3000', 'http://domain2nd.com', 'http://www.domain2nd.com'],
    credentials: true
};

后续配置HTTPS时，需补充https://domain2nd.com和https://www.domain2nd.com。

4. 修复Socket.io的CORS配置 #

同步更新Socket.io的跨域允许列表：

const io = new Server(httpServer, {
  path: "/sokt",
  cors: {
    origin: ["https://currentdomain.com", "http://localhost", "http://domain2nd.com", "http://www.domain2nd.com"]
  }
});

5. 重启服务生效 #

• 验证Nginx配置并重启：

sudo nginx -t # 检查配置语法
sudo systemctl restart nginx

• 重启Node.js服务（以pm2管理为例）：

pm2 restart your-node-app-name

额外注意事项 #

• 若后续为domain2nd.com配置HTTPS，可参考currentdomain.com的Certbot流程生成证书，修改Nginx监听端口为443 ssl。
• 确保React项目中API请求的baseURL已改为/api，避免跨域请求失败。

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