Angular端口转发无法连接NestJS Socket.IO问题求助

算力阿峰

2026-6-19

问题分析与解决方案

你的问题核心是Angular代理转发WebSocket请求时，路径未匹配NestJS的Socket.IO网关监听路径，导致请求超时。HTTP路由正常是因为你明确配置了/api前缀的转发规则，而WebSocket的Socket.IO默认监听根路径的/socket.io，代理转发后请求路径变为/api/socket.io，NestJS端无对应监听路径，因此无法响应。

下面提供两种可行的解决方案：

方案一：修改NestJS WebSocketGateway的监听路径

让Gateway直接监听/api/socket.io路径，匹配代理转发后的请求：

@WebSocketGateway({
  cors: {
    origin: [process.env.PWA_URL],
    credentials: true,
  },
  path: '/api/socket.io', // 指定Socket.IO服务路径为/api/socket.io
})

修改后，Angular端发起的http://localhost:4200/api/socket.io请求会直接匹配到NestJS的Gateway，WebSocket连接即可正常建立。

方案二：调整Angular代理配置，重写Socket.IO请求路径

保持NestJS Gateway默认配置不变，通过代理的路径重写，将/api/socket.io转换为NestJS监听的/socket.io：

{
  '/api': {
    secure: false,
    target: `http://localhost:3000`,
    headers: { 'X-Forwarded-Host': process.env.X_Forwarded_Host },
    ws: true,
  },
  // 单独配置Socket.IO的代理规则
  '/api/socket.io': {
    secure: false,
    target: `http://localhost:3000`,
    ws: true,
    pathRewrite: { '^/api': '' }, // 移除/api前缀，转发到3000/socket.io
    changeOrigin: true, // 确保请求头的Host与目标服务匹配
  }
}

同时，Angular端的Socket.IO客户端初始化时，需指定正确的连接路径：

import { io } from 'socket.io-client';

// 连接/api路径，代理会自动重写为/socket.io
const socket = io('/api', {
  transports: ['websocket'], // 强制使用WebSocket传输，避免轮询路径问题
});