使用Nginx代理Socket.io时出现xhr poll error的解决求助

问题核心原因 #

你的配置存在两个关键不匹配点：

1. Nginx代理路径与Socket.io默认请求路径未对齐
2. Socket.io服务端未明确指定服务路径，导致代理后的请求无法被正确识别

具体修复步骤 #

1. 更新Nginx配置 #

调整location块，补充长轮询超时设置，确保Socket.io的WebSocket和轮询请求都能正常转发：

location /example/ {
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $host;
    proxy_pass http://localhost:3336/;

    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_cache_bypass $http_upgrade;

    # 匹配Socket.io默认长轮询超时，避免请求被提前断开
    proxy_connect_timeout 7d;
    proxy_send_timeout 7d;
    proxy_read_timeout 7d;
}

2. 修改Socket.io服务端配置 #

创建Server实例时显式指定path，确保与Nginx代理路径保持一致：

// socket library
export const connectIo = (server: http.Server) => {
    socketIo = new Server(server, {
        path: "/example/socket.io/" // 新增路径配置
    })

    socketIo.on('connection', (socket) => {
        // 你的业务逻辑
    })
}

3. 调整客户端连接参数 #

指定正确的path，同时可优先启用WebSocket传输优化连接效率：

socket = io(`http://172.21.48.1`, {
    path: "/example/socket.io/",
    query: { unique_code: String(userId) },
    transports: ["websocket", "polling"] // 优先使用WebSocket
});

socket.on("connect_error", (err) => {
     console.log("connect_error:", err.message);
});

修复逻辑说明 #

• 统一前后端Socket.io请求路径后，Nginx代理层与服务端能正确识别连接请求
• 新增的超时设置避免长轮询请求被Nginx提前中断
• 显式指定传输方式可优先使用更高效的WebSocket协议

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