React Native中useEffect内Socket.IO WebSocket连接失败排查

我尝试在React组件的useEffect钩子中使用Socket.IO建立WebSocket连接，但连接无法正常工作，无法定位原因。以下是我使用的代码：

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

function MyComponent() {
  useEffect(() => {
    const token = 'TOKEN';
    const headers = {
      ['Authorization']: 'bearer ' + token,
    };

    const socket = io('URL', {
      auth: {
        ['Authorization']: 'bearer ' + token,
      },
      timeout: 10000,
      autoConnect: true,
      transports: ['websocket'],
      extraHeaders: headers,
    });

    socket.on('connect', () => {
      console.log('WebSocket client connected');
    });

    socket.on('error', (error) => {
      console.error('WebSocket error:', error);
    });

    socket.on('disconnect', (reason) => {
      console.log('WebSocket client disconnected:', reason);
    });

    socket.on('message', (data) => {
      console.log('WebSocket message:', data);
    });

    socket.on('connect_error', (error) => {
      console.error('WebSocket connect error:', error);
    });
  }, []);

  return (
    // JSX for your component
  );
}

当前控制台输出：

但使用Insomnia REST-Client携带HTTP认证头进行连接时完全正常：

请问原生客户端无法连接的原因是什么？

可能的原因及解决方案： #

• 认证配置冲突：同时设置auth和extraHeaders可能导致认证信息传递异常。浏览器环境中WebSocket握手的自定义Headers受同源策略限制，建议仅保留auth选项，Socket.IO会自动处理握手阶段的认证：

  const socket = io('URL', {
    auth: {
      Authorization: 'Bearer ' + token, // 注意首字母大写，部分服务器要求严格格式
    },
    timeout: 10000,
    autoConnect: true
  });
  

• 强制WebSocket传输导致失败：移除transports: ['websocket']配置，让客户端自动选择传输方式。有些环境下WebSocket握手会被拦截，Socket.IO默认的降级到轮询的机制能绕过这类问题。
• CORS配置不兼容：服务器端需确保CORS规则允许WebSocket请求携带Authorization头，同时允许对应的源地址访问。浏览器会对跨域请求做严格检查，而Insomnia不受此限制。
• Token格式问题：检查Bearer的大小写（多数服务器要求首字母大写），以及Token本身是否有效、未过期。
• 缺失连接清理逻辑：在useEffect中添加清理函数，避免组件卸载后残留连接导致异常：

  return () => {
    socket.disconnect();
  };
  

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