Angular WebSocket代理升级至WebSocket协议失败问题排查

看起来你的问题核心在于代理配置的路径映射和Socket.io的协议处理没有对齐，导致WebSocket升级请求没被正确转发。我帮你一步步梳理修复方案：

1. 修正代理配置文件 proxy.conf.json #

你的现有配置中，/sock/* 的target设置有误，而且缺少路径重写来匹配Socket.io的默认路径。修改后的配置应该这样：

{
  "/api/*": {
    "target": "http://localhost:3000",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
  },
  "/sock": {
    "target": "http://localhost:3000",
    "secure": false,
    "logLevel": "debug",
    "ws": true,
    "changeOrigin": true,
    "pathRewrite": {
      "^/sock": "/socket.io"
    }
  }
}

• 把/sock/*改成/sock，因为Socket.io的请求是/sock/?EIO=4&transport=websocket这类格式，通配符*会干扰路径匹配
• 添加pathRewrite，把客户端请求的/sock路径重写为服务端Socket.io监听的/socket.io
• 确保ws: true开启WebSocket代理支持

2. 调整客户端Socket.io连接配置 #

不要硬编码完整URL，改用相对路径，同时修正传输配置：

@Injectable()
export class WebSocketService {
  private socket;
  // 使用相对路径，避免环境切换问题
  private readonly SERVER_URL = '/';

  constructor() {
    console.log(`WebSocketService: initializing`);
    this.socket = socketIo(this.SERVER_URL, {
      // 这里的path要和代理配置里的前端路径一致
      path: '/sock',
      autoConnect: true,
      // 明确指定优先使用websocket传输，避免默认先轮询
      transports: ['websocket', 'polling'],
      transportOptions: {
        polling: {
          extraHeaders: {
            'Authorization': 'Bearer abc'
          }
        }
      }
    });
  }
  ...
}

• 用相对路径/代替http://localhost:4200，适配不同环境
• 添加transports: ['websocket', 'polling']，让Socket.io优先尝试WebSocket连接，而不是默认的先轮询
• 保持path: '/sock'和代理配置的前端路径一致

3. 验证服务端配置 #

你的服务端Socket.io配置基本没问题，只需确保：

• 确实把Socket.io绑定到了运行在3000端口的HTTP server实例上
• serveClient: false是正确的，因为我们不需要服务端提供Socket.io客户端文件

4. 重新启动应用 #

先重启你的3000端口后端服务，然后重新启动Angular：

ng serve --proxy-config proxy.conf.json

这样调整后，代理应该能正确转发WebSocket升级请求，不会再回退到长轮询了。你可以打开浏览器开发者工具的Network标签，筛选WS类型，就能看到成功建立的WebSocket连接了。

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