Socket.io/React/Express报connect_error due to server error

问题共4处，按顺序修复即可解决：

1. 服务端缺失依赖导入触发运行时报错 #

代码里用path处理静态文件路径、uuid生成Session ID，但没在顶部导入这两个依赖。Socket.io握手请求会走Express中间件链，直接触发ReferenceError: uuid is not defined/ReferenceError: path is not defined错误，导致握手失败，是服务端返回错误的直接原因。
修复：在服务端代码顶部补依赖导入：

const path = require("path");
const { v4: uuidv4 } = require("uuid");

同时把Session配置里genid方法的返回值改成uuidv4()。

2. Socket.io服务端初始化写法错误 #

当前初始化逻辑不符合Socket.io v3+版本规范，还存在变量冲突、跨域配置缺失的问题：

• 直接调用导入的socket.io模块初始化，没正确实例化Server类
• 把Socket.io服务实例命名为socket，和连接回调里的单连接参数重名，会引发逻辑覆盖
• 没配跨域规则，跨域场景下请求会被浏览器拦截
  修复：替换原有Socket初始化代码为：

// Socket.io 初始化
const { Server } = require("socket.io");
const io = new Server(server, {
  cors: {
    origin: process.env.NODE_ENV === "production" ? false : "*",
    methods: ["GET", "POST"]
  }
});
io.on("connection", (socket) => {
  console.log(`socket has connected ${socket.id}`);
});

3. 通配前端路由拦截了Socket握手请求 #

你写的app.get("*")路由会匹配所有GET请求，包括Socket.io的/socket.io前缀轮询请求，提前返回index.html内容，导致Socket.io服务端根本收不到握手请求。客户端拿到HTML格式的响应（状态码200）解析失败，就会触发连接错误，和你观察到的「轮询请求200但无法连接」现象完全一致。
修复：修改通配路由逻辑，跳过Socket.io相关路径：

app.get("*", (req, res, next) => {
  // 跳过socket.io请求，交给Socket.io服务处理
  if (req.path.startsWith("/socket.io")) return next();
  res.sendFile(path.join(reactPath, "index.html"));
});

4. 客户端连接地址与端口不匹配 #

你当前客户端拼接的endpoint取的是前端页面的端口，如果开发环境下React跑在dev server（默认3000端口）、后端跑在5000端口，且没配置代理转发，会直接请求到前端服务地址，连不上后端。
修复：根据环境配置正确的连接地址：

const endpoint = process.env.NODE_ENV === "production" 
  ? window.location.origin 
  : "http://localhost:5000";
export const socket = connect(endpoint, { 
  rejectUnauthorized: false,
  transports: ['websocket', 'polling']
});

最后校验 #

• 确认服务端监听端口和客户端请求端口一致：你贴的服务端代码默认监听3000端口，但轮询请求发往5000，要检查process.env.PORT配置是否正确，不要出现端口不匹配的问题
• 所有Express中间件、路由注册逻辑都要写在http.Server(app)初始化之前，Socket.io初始化要在服务启动监听前完成

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