Nginx反向代理下React+Node.js项目Socket.io连接失败如何解决

云上老周

2026-9-28

问题根因与修复方案

你报错的核心问题有两个：

客户端实际请求的地址是http://localhost:9000，线上用户浏览器访问时本地没有运行Socket服务，自然报连接拒绝
报错的请求路径是/socket.io/，和你前后端配置的/socketio不符，说明前端打包的是未修改path配置的旧代码

1. 修复前端Socket连接代码

不要写死服务端IP，使用相对路径自动适配当前部署的域名、协议，同时明确指定传输顺序：

import { io } from "socket.io-client";

let socket = io({
    path: '/socketio',
    transports: ['websocket', 'polling']
});

export default socket;

修改后重新执行React项目build命令，把新生成的build文件替换到/root/my-app/build目录。

2. 修正Nginx配置

你的Socket.io反向代理配置缺必要的头信息和缓存跳过规则，修改/etc/nginx/sites-available/react的location /socketio块如下：

location /socketio {
    proxy_pass http://localhost:9000;      
    include proxy_params;
    proxy_redirect off;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;      
    proxy_set_header Connection "Upgrade";
    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;
    proxy_cache_bypass $http_upgrade;
}

修改后先验证配置正确性：
sudo nginx -t
返回success后重载配置生效：
sudo systemctl reload nginx

3. 验证后端服务状态

执行以下命令确认pm2托管的后端服务正常运行：
pm2 status
如果服务状态不是online，执行pm2 logs查看报错信息排查问题。
在服务器本地执行curl命令验证Socket服务可正常访问：
curl http://localhost:9000/socketio/?EIO=4
正常会返回类似0{"sid":"xxx","upgrades":["websocket"],"pingInterval":25000,"pingTimeout":20000}的响应。