Angular+Node.js+Nginx代理部署K8s时WebSocket连接失败求助

核心问题分析与修复方案 #

1. 修正Nginx的WebSocket代理配置 #

当前Nginx的Connection头配置完全错误，WebSocket需要特定的升级头才能完成握手。修改Nginx配置如下：

location /socketService/ {
    access_by_lua_file /etc/nginx/auth.lua;
    proxy_pass  http://socketService:3100/;  # 末尾加斜杠，避免路径拼接异常
    proxy_http_version 1.1;
    # WebSocket握手必备头
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-Host $host;
    proxy_set_header X-Forwarded-Server $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    # 延长超时时间，防止连接被过早断开
    proxy_connect_timeout 7d;
    proxy_send_timeout 7d;
    proxy_read_timeout 7d;
}

原因：WebSocket协议依赖HTTP握手升级，必须传递Upgrade和Connection头到后端，否则Nginx会直接中断WebSocket连接，触发你遇到的错误。

2. 统一Socket.IO的路径配置 #

客户端连接路径与服务端默认端点不匹配，需同步配置：

服务端修改：指定Socket.IO路径为/socketService

const io = socketIO(server, {
  cors: {
    origin: "*",
    methods: ["GET", "POST"]
  },
  path: "/socketService"  // 新增该行，与客户端连接路径对齐
});

客户端修改：确保连接参数正确

connectToSocket() {
  return new Promise(res => {
    const socket = io('/socketService', {
      query: { ops: value },
      // 优先尝试WebSocket传输
      transports: ['websocket', 'polling']
    });
    res(socket);
  });
}

原因：你的连接URL显示请求的是默认路径/socket.io，但代码里指定的是/socketService，路径不匹配会导致后端无法识别请求，直接断开连接。

3. 开启Angular代理的WebSocket支持 #

Angular默认代理不会自动处理WebSocket请求，需显式开启：

"/socketService": {
  "target": "https://NginxService:8080",  // 去掉末尾斜杠，避免路径重复
  "secure": false,
  "logLevel": "debug",
  "ws": true  // 新增该行，启用WebSocket代理
}

原因：未开启ws: true时，WebSocket请求会被当作普通HTTP请求处理，无法完成握手。

4. 清理重复的CORS配置 #

服务端同时使用cors()中间件和自定义CORS头，可能引发冲突，保留一种即可：

var express = require('express');
var http = require('http');
var cors = require('cors');
const socketIO = require("socket.io");

// 仅保留cors中间件配置
app.use(cors({
  origin: "*",
  methods: ["GET", "POST"],
  credentials: true
}));

app.use(express.static(__dirname + '/dist/terminal'));

const server = http.createServer(app)
const port = 3100;
const io = socketIO(server, {
  cors: {
    origin: "*",
    methods: ["GET", "POST"]
  },
  path: "/socketService"
});
server.listen(port);

原因：重复的CORS头可能导致浏览器预检请求失败，间接影响WebSocket握手。

5. 验证Kubernetes服务配置 #

确保Kubernetes环境中：

• socketService服务正确暴露3100端口
• Nginx服务的8080端口可正常访问socketService
• 网关白名单包含/socketService及/socketService/*（Socket.IO会发起子路径请求）

验证步骤 #

1. 重启Nginx和Socket.IO后端服务
2. 启动Angular应用，查看浏览器控制台的WebSocket请求状态
3. 检查Nginx访问日志，确认请求是否正确转发到后端

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