Firefox发送合并头Connection: keep-alive, Upgrade与移动运营商代理冲突

我来帮你拆解这个问题并给出可行的解决方案——你遇到的情况其实是移动运营商代理对HTTP请求头的兼容问题在Firefox上的暴露。

问题根源分析 #

你已经精准定位到了关键差异：

• Chrome发起WebSocket握手时，发送的是单一值的请求头：Connection: Upgrade
• Firefox则会发送合并值的请求头：Connection: keep-alive, Upgrade

虽然HTTP规范允许Connection头包含多个逗号分隔的值，但不少移动运营商的代理服务器可能是老旧版本，或者配置上没有处理这种多值场景。当代理遇到同时包含keep-alive和Upgrade的Connection头时，可能会错误地忽略Upgrade指令，导致WebSocket握手流程中断，最终连接失败。

可行的修复方案 #

1. 服务端兼容多值Connection头（优先推荐） #

修改你的WebSocket Server的请求头解析逻辑，只要Connection头里包含Upgrade（不管有没有伴随keep-alive），就正常处理WebSocket握手。这种方式对用户完全无感知，覆盖范围最广。

举个Node.js ws库的示例：

const WebSocket = require('ws');
const wss = new WebSocket.Server({
  verifyClient: (info, done) => {
    const connectionHeader = info.req.headers.connection || '';
    // 忽略大小写检查是否包含Upgrade关键词
    if (/upgrade/i.test(connectionHeader)) {
      done(true); // 允许握手
    } else {
      done(false, 400, 'Bad Request'); // 拒绝非WebSocket请求
    }
  },
  port: 8080
});

2. 前端干预修改Firefox的请求头 #

浏览器原生的WebSocket API不允许直接修改Connection头，但可以通过Service Worker拦截请求并调整头信息。这种方法需要浏览器支持Service Worker，且在HTTPS环境下生效（localhost开发环境例外）。

示例Service Worker代码：

self.addEventListener('fetch', (event) => {
  const req = event.request;
  // 只针对你的WebSocket服务地址处理
  if (req.url.startsWith('ws://your-server-domain') || req.url.startsWith('wss://your-server-domain')) {
    const modifiedHeaders = new Headers(req.headers);
    modifiedHeaders.set('Connection', 'Upgrade');
    const modifiedReq = new Request(req, { headers: modifiedHeaders });
    event.respondWith(fetch(modifiedReq));
  }
});

3. 切换到WSS加密协议 #

如果上述方案都不奏效，可以尝试将WebSocket服务切换为WSS（WebSocket over TLS）。加密后的流量通常会绕过运营商的明文代理解析，减少请求头被篡改或错误处理的概率。

总结 #

最稳妥的方案是优先调整服务端的解析逻辑，兼容多值的Connection头，毕竟修改服务端不需要依赖用户端的任何设置，能一次性解决所有类似的代理兼容问题。

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