如何将HttpOnly Cookie中的JWT认证令牌发送至Socket.IO服务器？

核心逻辑 #

你说的「仅在连接时发送一次令牌」是完全正确的。Socket.IO 建立 WebSocket 握手时会发起 HTTP 请求，此时可以利用浏览器自动携带 HttpOnly Cookie 的特性完成认证，无需手动传递令牌。

前端（React + socket.io-client）配置 #

初始化 Socket 连接时，必须开启 withCredentials 选项，让浏览器在握手请求中自动携带 Cookie：

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

const socket = io("你的服务器地址", {
  withCredentials: true, // 关键：允许浏览器携带跨域/同域 Cookie
  transports: ["websocket", "polling"] // 优先使用 WebSocket，降级用轮询
});

后端（Express + Socket.IO）配置 #

1. 先确保 Express 配置了 Cookie 解析中间件：

const express = require('express');
const cookieParser = require('cookie-parser');
const app = express();

app.use(cookieParser()); // 解析请求中的 Cookie

2. Socket.IO 服务器需配置跨域规则，允许接收带凭证的请求：

const http = require('http');
const { Server } = require('socket.io');
const server = http.createServer(app);
const io = new Server(server, {
  cors: {
    origin: "你的前端域名", // 比如 http://localhost:3000，跨域必须指定精确域名
    credentials: true // 关键：允许接收带 Cookie 的请求
  }
});

3. 在连接事件中提取并验证 Cookie 里的 JWT：

const jwt = require('jsonwebtoken'); // 用你项目中已有的 JWT 库

io.on('connection', (socket) => {
  // 从握手请求的 Cookie 中提取 JWT
  const token = socket.handshake.headers.cookie?.split('; ').find(row => row.startsWith('你的JWT_COOKIE_NAME='))?.split('=')[1];
  
  if (!token) {
    socket.disconnect(true); // 无令牌直接断开连接
    return;
  }

  try {
    // 验证 JWT 并解析用户信息
    const decoded = jwt.verify(token, '你的JWT密钥');
    socket.user = decoded; // 将用户信息挂载到 socket 对象，后续聊天逻辑可直接使用
    
    // 向前端返回认证成功的用户信息（姓名、头像等）
    socket.emit('auth-success', {
      name: decoded.name,
      avatar: decoded.avatar
    });

    // 后续聊天业务逻辑...
  } catch (err) {
    socket.disconnect(true); // 令牌无效/过期，断开连接
  }
});

关键注意事项 #

• 同域部署时，origin 可设为 true；跨域必须指定精确的前端域名，不能用通配符
• 确保 JWT 的 Cookie 配置了正确的 domain 和 path，保证浏览器能在握手请求中携带
• 不要手动通过 query 参数传递 JWT，这会破坏 HttpOnly Cookie 防 XSS 的安全特性

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