生产环境跨域WebSocket连接失败（前后端部署在Vercel）

Vercel的普通Serverless Functions不支持WebSocket长连接，这是问题的核心原因——Serverless函数是按需启动、短生命周期的，没法维持WebSocket需要的持久连接。下面是针对性的解决办法：

方案1：改用Vercel Edge Functions部署Socket.IO服务 #

Edge Functions支持WebSocket，适合部署实时通信服务。修改服务端代码适配Edge Runtime：

// app/api/socket/route.ts
import { Server } from "socket.io";

export const runtime = "edge"; // 指定使用Edge Runtime

export async function POST(req: Request) {
  const { socket, response } = await Server.createSocketHandler(req, {
    cors: {
      origin: "https://chattin.vercel.app",
      methods: ["GET", "POST"],
      credentials: true
    }
  });

  socket.on("connection", (client) => {
    // 自定义业务逻辑示例
    client.on("message", (data) => {
      client.broadcast.emit("message", data);
    });
  });

  return response;
}

客户端连接时调整路径到Edge Functions的路由：

import { io } from "socket.io-client";
const socket = io("https://chat-app-bice-ten.vercel.app", {
  path: "/api/socket", // 对应Edge Functions的路由路径
  transports: ["websocket", "polling"] // 允许自动降级
});
export default socket;

方案2：保留Serverless Functions，改用Polling传输 #

如果暂时不想切换到Edge Functions，可以让Socket.IO降级到HTTP Polling（实时性略差，但能在Vercel Serverless上运行）：

修改客户端代码，移除强制websocket传输：

import { io } from "socket.io-client";
const socket = io("https://chat-app-bice-ten.vercel.app", {
  transports: ["polling", "websocket"], // 优先用polling，自动尝试升级
  withCredentials: true
});
export default socket;

同时更新服务端CORS配置，允许credentials：

const io = socketIo(server, {
  cors: {
    origin: "https://chattin.vercel.app",
    credentials: true,
    methods: ["GET", "POST"]
  },
});

额外检查项 #

• 确认Vercel项目部署日志无报错，服务端代码已正确打包部署
• 检查前端域名是否添加到Vercel项目的CORS白名单（项目设置→Security→CORS）
• 验证Socket.IO前后端版本一致，避免版本不兼容导致连接失败

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