初始化SocketIO后Express HTTP路由无法调用且返回Transport unknown错误

问题根源 #

你将Socket.IO的监听路径设置为了根路径/，导致所有进入服务的请求都会优先被Socket.IO拦截处理，普通HTTP请求不符合Socket.IO的传输协议规范，直接返回Transport unknown错误，根本无法匹配到你定义的Express路由。

存在的其他错误 #

• Socket.IO CORS配置中methods字段存在语法错误，POST后多了多余的英文逗号
• 你先启动了httpServer，之后才注册voucher路由，部分场景下会导致路由未注册完成服务就已启动，路由不生效

修复步骤 #

1. 调整Socket.IO的监听路径为专用路径，不要占用根路径，建议用默认值/socket.io/
2. 删掉CORS配置中POST后的多余逗号
3. 调整代码顺序：先注册所有Express中间件、路由，再启动httpServer
4. 同步修改客户端Socket.IO连接配置的path参数，和服务端保持一致

修复后示例代码 #

app.use(express.json());
app.use(
  cors({
    origin: FRONTEND_CORS,
  })
);
// 先注册路由
app.use(voucherRoutes);

// 配置Socket.IO，使用专用路径
const io = new Server(httpServer, {
  path: "/socket.io/", // 修改为专用路径，不再占用根路径
  cors: {
    origin: FRONTEND_CORS,
    methods: ["GET", "POST"], // 删掉多余逗号
    credentials: false,
  },
});
io.on("connection", (socket: Socket) => {
  // 你的Socket逻辑
});

// 所有配置完成后再启动服务
httpServer.listen(PORT, () => {
  console.log(`server is running on port ${PORT}`);
});

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