React应用Chrome连接本地WebSocket失败但Postman可连通问题排查

• 跨域限制：Chrome浏览器受同源策略约束，Postman不受该规则限制所以可以正常连接。如果你的React应用运行地址的协议、域名、端口任意一项和WebSocket服务不一致，就会触发跨域拦截。比如React跑在http://localhost:3000，WebSocket服务监听8080端口，端口不同属于跨域，需要在WebSocket服务端配置允许React应用源的跨域请求。
• 连接时机错误：如果在React组件渲染阶段过早初始化WebSocket，或者未处理组件卸载时的连接销毁逻辑，会出现重复初始化、连接冲突的问题。建议把连接逻辑放在useEffect钩子中，同时增加错误监听打印更详细的报错信息：

useEffect(() => {
  const ws = new WebSocket('ws://localhost:8080/tables');

  ws.onmessage = function message(data: any) {
    console.log('received: %s', data);
  };
  // 新增错误监听定位具体问题
  ws.onerror = (err) => {
    console.error('WebSocket具体报错信息：', err);
  };

  // 组件卸载时关闭连接避免内存泄漏和重复连接
  return () => {
    ws.close();
  };
}, []);

• 协议不匹配：如果你的React应用是通过https协议启动的，Chrome会默认拦截不安全的ws协议请求，要求使用加密的wss协议。你可以选择把React应用切换为http协议启动，或者给WebSocket服务配置SSL证书改用wss协议访问。
• 路径配置错误：确认你用Postman测试时连接的地址是否带/tables路径，检查WebSocket服务端是否配置了/tables路径的WebSocket路由支持，保证两端路径完全一致。
• 浏览器扩展拦截：部分代理、广告拦截类Chrome扩展可能会主动拦截WebSocket请求，可以尝试禁用所有扩展后用无痕模式打开应用测试。

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