Angular微前端RxJS WebSocket在Firefox报1005错误的排查与解决

错误原因分析 #

WebSocket 1005错误表示连接被无提示关闭，结合微前端场景和Firefox的特性，常见原因包括：

• Firefox同源策略的严格校验：Firefox对跨域WebSocket连接的凭证（Cookie/Token）校验比Chrome更严格，微前端作为子应用嵌入主应用时，若WebSocket请求未正确携带跨域凭证，会被Firefox静默关闭连接。
• 微前端沙箱的隔离限制：部分微前端框架（如Module Federation、Single-SPA）的沙箱机制会修改全局对象，导致RxJS创建WebSocket时的浏览器API调用被干扰，Firefox下这种干扰会触发连接异常关闭。
• RxJS WebSocket的默认配置差异：RxJS的webSocket()方法默认配置在Firefox下可能不兼容，比如未设置protocols参数或连接超时逻辑缺失，导致连接建立后被立即关闭。
• Firefox的连接复用机制：Firefox默认会复用WebSocket连接池中的闲置连接，若微前端多次创建连接时未正确清理旧连接，会触发连接冲突导致1005错误。

具体修复方案 #

1. 确保WebSocket请求携带跨域凭证 #

在RxJS创建WebSocket连接时，显式配置withCredentials: true，同时确保后端服务器允许跨域凭证：

import { webSocket } from 'rxjs/webSocket';

const socket$ = webSocket({
  url: 'wss://your-websocket-server.com',
  withCredentials: true, // Firefox下必须显式设置
  protocols: ['your-protocol'] // 可选：补充协议配置
});

后端需设置响应头：

Access-Control-Allow-Origin: 主应用域名（不能用*）
Access-Control-Allow-Credentials: true

2. 调整微前端沙箱配置 #

如果使用Module Federation，在webpack.config.js中禁用对WebSocket API的沙箱拦截：

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'microApp',
      exposes: { /* 你的暴露配置 */ },
      shared: { /* 你的共享依赖配置 */ },
      sandbox: {
        exclude: ['WebSocket'] // 跳过WebSocket的沙箱隔离
      }
    })
  ]
};

如果是Single-SPA，在注册子应用时传递原生WebSocket对象：

registerApplication({
  name: 'microApp',
  app: () => System.import('microApp'),
  activeWhen: () => true,
  customProps: {
    nativeWebSocket: window.WebSocket
  }
});

微前端中使用传入的原生构造函数创建连接：

// 从customProps获取原生WebSocket
const socket$ = webSocket({
  url: 'wss://your-websocket-server.com',
  WebSocketCtor: nativeWebSocket
});

3. 完善RxJS WebSocket的错误处理 #

添加重试逻辑，针对1005错误进行针对性重试：

import { webSocket, retry, timer } from 'rxjs';

const socket$ = webSocket({
  url: 'wss://your-websocket-server.com',
  withCredentials: true
}).pipe(
  retry({
    delay: (error) => {
      if (error.code === 1005) {
        return timer(1000); // 1秒后重试
      }
      throw error;
    }
  })
);

4. 强制Firefox创建新连接 #

在WebSocket URL后添加随机参数，避免连接复用冲突：

const socketUrl = `wss://your-websocket-server.com?timestamp=${Date.now()}`;
const socket$ = webSocket({
  url: socketUrl,
  withCredentials: true
});

验证步骤 #

1. 清除Firefox缓存和Cookie，重启浏览器后测试。
2. 通过Firefox开发者工具「网络」面板，确认WebSocket请求的响应头包含Access-Control-Allow-Credentials: true。
3. 查看控制台日志，排查是否有其他隐藏错误辅助定位问题。

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