Chrome中Socket.io WSS连接失败报错，Firefox可正常建立连接

1. 校验Socket.io版本兼容性 #

Socket.io客户端与服务端版本必须严格匹配，版本不兼容会直接导致跨浏览器连接异常。比如服务端使用socket.io@4.x，客户端必须对应使用socket.io-client@4.x，否则Chrome极易出现握手失败。

解决：执行命令统一版本：

• 服务端：npm install socket.io@latest
• 客户端：npm install socket.io-client@latest

2. 排查Chrome安全策略限制 #

Chrome对WSS连接的证书校验和安全规则比Firefox更严格：

• 确保environment.SOCKET_URL以wss://开头，绝对避免混合HTTP/HTTPS内容；
• 若使用自签名证书，手动在Chrome中信任证书：访问wss://你的服务域名:端口，点击地址栏警告→「高级」→「继续前往」，完成证书信任操作。

3. 优化客户端连接配置 #

当前配置中autoConnect: true与手动调用connect()可能触发重复连接错误，同时关闭协议升级机制可强制使用WebSocket传输，避免Chrome在升级环节出错：

修改后的Angular客户端代码：

this.socket = io(`${environment.SOCKET_URL}admin`, {
  transports: ['websocket'],
  autoConnect: false, // 关闭自动连接，手动控制连接时机
  reconnection: true,
  reconnectionAttempts: 5, // 限制重连次数，避免无限报错
  secure: true, // 显式指定WSS安全连接
  upgrade: false // 禁用协议升级，强制使用WebSocket
});

this.socket.connect();

// 添加错误监听，获取更详细的报错信息
this.socket.on('error', (error) => {
  console.error('Socket连接错误详情:', error);
});

4. 检查服务端CORS配置 #

Chrome对CORS预检请求的处理更严格，服务端需明确允许客户端域名的跨域请求：

Node.js服务端配置示例：

const io = require('socket.io')(server, {
  cors: {
    origin: 'https://你的Angular客户端域名', // 替换为实际客户端域名
    methods: ['GET', 'POST'],
    credentials: true
  }
});

5. 排除浏览器扩展或代理干扰 #

Chrome的广告拦截器、VPN等扩展可能拦截WebSocket连接，尝试在无痕窗口中测试连接：

• 若无痕窗口连接正常，逐一禁用浏览器扩展排查干扰源；
• 若仍报错，检查本地代理设置，确保未拦截WSS请求。

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