Nginx proxy_pass代理Socket.io服务时连接失败求助

核心问题定位 #

从你提供的代码和现象来看，问题集中在客户端路径配置不匹配、Nginx代理细节遗漏以及CORS白名单未正确配置这几个点上，以下是具体修复步骤：

1. 修正客户端Socket.io路径配置 #

你的Nginx已将/theAppWithSocketIo/socket.io/代理到服务端的/socket.io/，但客户端path参数填写错误，导致无法匹配代理路径。

修改客户端代码：

"use strict";

// 如果客户端页面本身在 /theAppWithSocketIo/ 路径下，可直接用相对地址，无需硬编码IP
var Socket = io(
    'http://<IPADRESS>',
    {
        // 改为正确的代理路径
        path: '/theAppWithSocketIo/socket.io',
        rejectUnauthorized: false,
        extraHeaders: {
            token: document.cookie.split("=")[1]
        }
    }
);

Socket.on("connect_error", (err) => {
    console.log(`connect_error due to ${err}`);
});

2. 完善Nginx代理配置 #

你的Nginx配置已包含WebSocket升级的基本头部，但需补充缓存绕过规则，同时确保引号格式正确（避免转义字符）：

修改Nginx的/theAppWithSocketIo/socket.io/ location块：

location /theAppWithSocketIo/socket.io/ {
    proxy_http_version      1.1;
    proxy_set_header        X-Real-IP $remote_addr;
    proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header        Host $http_host;
    proxy_set_header        X-NginX-Proxy false;

    proxy_pass              http://localhost:3000/socket.io/;
    proxy_redirect          off;

    proxy_set_header        Upgrade $http_upgrade;
    // 确保使用正常双引号，而非转义的"
    proxy_set_header        Connection "upgrade";
    // 添加缓存绕过，避免WebSocket请求被缓存
    proxy_cache_bypass      $http_upgrade;
}

修改完成后重启Nginx：

sudo nginx -s reload

3. 检查服务端CORS白名单配置 #

服务端CORS配置中whitelist为占位符<URLS>，必须将客户端实际访问的域名（比如http://<IPADRESS>）添加到白名单，否则会被CORS拦截：

修改服务端代码：

// 替换<IPADRESS>为实际客户端访问地址，例如http://192.168.1.100
const whitelist = ['http://<IPADRESS>'];
const corsOptions = {
    origin: (origin, callback) => {
        if (origin === undefined || whitelist.includes(origin)) {
            callback(null, true);
        } else {
            callback(new Error('Not allowed by CORS'));
        }
    },
    credentials: true
};
app.use(cors(corsOptions));

测试阶段可暂时将origin设为true快速验证（生产环境禁止此操作）：

const corsOptions = {
    origin: true,
    credentials: true
};

4. 服务端Socket.io显式指定路径（可选但推荐） #

虽然Socket.io默认路径为/socket.io，但显式指定可避免后续配置混淆：

const io = new Server(httpServer, {
    path: '/socket.io'
});

验证步骤 #

1. 重启Node.js服务
2. 打开客户端页面，查看浏览器开发者工具Network标签：
   • 检查是否有GET /theAppWithSocketIo/socket.io/?EIO=4&transport=polling...请求，状态应为200
   • 检查后续WebSocket请求（ws://开头）是否成功建立（状态码101）
3. 查看服务端日志，确认是否打印出connected

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