React+TypeScript环境下socket.io-client连接Socket.io服务器无响应排查

安全阿岳

2026-10-3

问题原因排查方向

跨域配置缺失（最常见）
Socket.io默认禁止跨域请求，你的服务端运行在3001端口，React前端运行在3000端口，属于跨域场景，需要在服务端新增CORS配置：
修改服务端io初始化代码：

const io = new Server(server, {
  cors: {
    origin: "http://localhost:3000", // 仅允许本地3000端口的前端访问
    methods: ["GET", "POST"]
  }
});

开发阶段如果需要放开所有来源限制，可临时将origin设为"*"，生产环境必须配置为实际的前端域名。

两端Socket.io版本不兼容
如果服务端的socket.io包和客户端的socket.io-client包大版本不一致（比如服务端用v4、客户端用v2），会出现静默连接失败的情况，检查两边依赖的版本号，确保大版本匹配即可。
客户端连接逻辑异常
你当前的连接代码写在组件外部，React脚手架的热重载机制可能导致模块重复加载、连接逻辑没有正常触发，建议将连接逻辑放到组件挂载的生命周期中执行，且无需手动调用connect方法，实例化后默认会自动连接：

import { useEffect } from 'react';
import io from "socket.io-client";

const App: React.FC<{}> = () => {
  useEffect(() => {
    const client = io("http://localhost:3001");
    // 可监听连接成功事件验证
    client.on('connect', () => {
      console.log('客户端连接成功，id为：', client.id);
    });
    // 组件卸载时断开连接，避免重复连接
    return () => client.disconnect();
  }, []);

  return (
    <div className="app">
      <h1>Socket.io</h1>
    </div>
  );
};