React.js项目中Socket.io-client无法连接及CORS相关问题求助

开发者阿泽

2026-10-3

修复方案

跨域问题处理

跨域错误的触发原因是浏览器同源策略限制：你的前端React应用和后端Socket服务运行在不同端口，Socket.io v3及更高版本默认禁止跨域请求，需要在服务端手动配置CORS规则。
修改服务端Socket实例初始化代码：

// 替换原来的 const io = socketio(server)
const io = socketio(server, {
  cors: {
    origin: "http://localhost:3000", // 替换为你前端实际的运行地址，React默认是3000端口
    methods: ["GET", "POST"]
  }
});

开发环境下可以临时设置origin: "*"允许所有来源访问，生产环境必须替换为实际的前端域名。

Socket连接状态为false处理

你的客户端useEffect没有配置依赖数组，会导致组件每渲染一次就重新创建一个Socket实例，永远无法完成正常的连接握手。
修改客户端的useEffect逻辑：

useEffect(() => {
    const { name, room } = queryString.parse(location.search);
    socket = io(ENDPOINT);

    setName(name);
    setRoom(room);

    console.log(socket);
    
    // 组件卸载时主动断开连接，避免内存泄漏
    return () => {
      socket.disconnect();
    }
}, []); // 空依赖数组保证逻辑仅在组件挂载时执行一次