Chrome环境下Nginx部署WebSocket连接失败问题排查及Node.js SSL配置方案咨询

首先明确：你不需要为Node.js服务器单独配置SSL密钥，因为Nginx已经作为SSL终止代理——前端通过wss协议连接Nginx，Nginx再用普通http协议转发请求到你的Node.js Socket.IO服务。下面一步步排查和修复问题：

1. 修复Nginx的Socket.IO配置 #

你的Nginx配置中缺少了对非Upgrade请求的处理逻辑，这是导致WebSocket握手失败的常见原因。修改如下：

第一步：在Nginx的http块中添加映射规则（注意是在所有server块之外） #

http {
    # 保留你原有的其他配置...
    
    map $http_upgrade $connection_upgrade {
        default upgrade;
        ''      close;
    }
}

这个规则会根据客户端的Upgrade请求头动态设置Connection头，确保非WebSocket请求能正常关闭连接，避免握手异常。

第二步：更新location /socket.io/的配置 #

把硬编码的Connection "upgrade"改为使用上面定义的变量，同时修正proxy_pass的路径匹配：

location /socket.io/ {
    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:8000/socket.io/;  # 必须加上/socket.io/后缀，确保路径完全匹配
    proxy_redirect off;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $connection_upgrade;  # 使用变量代替硬编码，适配不同请求类型
    proxy_cache_bypass $http_upgrade;  # 确保WebSocket请求不被缓存
}

2. 确认React端的Socket.IO连接地址 #

检查你的REACT_APP_API环境变量值：

• 如果它是https://mydomain.com（域名根地址），当前的io(process.env.REACT_APP_API)是正确的，Socket.IO会自动使用wss://mydomain.com/socket.io/建立连接。
• 如果它是https://mydomain.com/api（接口前缀地址），需要修改连接代码，直接指向域名根：

  socket.current = io('https://mydomain.com');
  // 或者通过环境变量动态调整：
  socket.current = io(process.env.REACT_APP_API.replace('/api', ''));
  

因为你的Node.js Socket.IO服务是挂载在HTTP服务器根路径下的，并非/api前缀下。

3. 验证GoDaddy SSL证书配置 #

你从GoDaddy拿到的三个文件，正确的合并方式是：

1. 打开主域名证书文件（比如mydomain.crt），复制所有内容。
2. 打开中间证书文件（比如gd_bundle-g2-g1.crt），复制所有内容粘贴到主证书内容的下方。
3. 将合并后的内容保存为chained.crt（即你当前使用的文件），同时确保Nginx进程有读取权限：

   sudo chmod 600 /home/chained.crt /home/mykey.key
   sudo chown www-data:www-data /home/chained.crt /home/mykey.key
   

4. 优化Node.js的Socket.IO配置（可选但推荐） #

虽然不是连接失败的直接原因，但生产环境建议收紧CORS规则，避免使用通配符*：

const io = require('socket.io')(httpServer, {
  cors: {
    origin: 'https://mydomain.com',  // 替换为你的前端域名
    methods: ['GET', 'POST'],  // 注意这里是数组元素分开，不是字符串内的逗号分隔
    credentials: true,
    allowedHeaders: ['custom-header'],
  },
})

做完以上修改后，重启Nginx和Node.js服务，再测试WebSocket连接应该就能正常工作了。

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