React启动后控制台报ws://localhost/sockjs-node连接失败

这个报错来自webpack-dev-server的热更新客户端，sockjs-node是本地开发时用来和dev server建立WebSocket通信、实现代码热更新的通道，连接失败只会导致本地开发时热更新功能失效，不会影响页面本身的渲染逻辑，也不会出现在生产环境。
常见触发场景都是近期本地配置/依赖变更导致的：

• 修改过项目启动端口、host配置，但热更新客户端的WebSocket连接地址没有同步更新，比如dev server实际跑在3000端口，客户端默认请求ws://localhost（不带端口默认走80端口），自然连不上
• 本地开启了全局代理、VPN，或者修改过系统hosts文件，导致localhost的请求被劫持到其他服务
• 升级过react-scripts、webpack-dev-server相关依赖，新版本默认的sock连接配置和旧版本不兼容
• 自定义webpack devServer配置时，误填了sockHost、sockPort参数，或者开启了HTTPS但WebSocket还在用非加密的ws协议

按优先级从高到低操作即可：

1. 校正WebSocket连接端口
   启动yarn start后先看终端输出的本地访问地址，确认实际启动端口（比如默认是3000）。
   • 未eject的create-react-app项目：直接在项目根目录新建.env文件，添加配置WDS_SOCKET_PORT=你的实际启动端口，比如端口为3000就写WDS_SOCKET_PORT=3000，保存后重启dev服务即可。
   • 自定义webpack配置的项目：找到devServer配置块，补全对应参数：

   devServer: {
     // 保留原有配置
     host: 'localhost',
     port: 3000, // 替换为你实际的启动端口
     sockHost: 'localhost',
     sockPort: 3000,
     // 如果你本地开了HTTPS，取消注释下面这行
     // server: 'https'
   }
   

2. 排查本地网络劫持
   • 临时关闭全局代理、VPN类工具，刷新页面看报错是否消失
   • 检查系统hosts文件：Windows路径为C:\Windows\System32\drivers\etc\hosts，Mac/Linux路径为/etc/hosts，确认是否存在将localhost指向非127.0.0.1地址的条目，有则注释或删除后刷新DNS缓存
3. 修复依赖异常
   如果近期升级过构建相关依赖，可删除依赖目录和锁文件后重新安装排除版本兼容问题：

rm -rf node_modules yarn.lock
yarn install

安装完成后重启dev服务验证。
4. 临时屏蔽报错（不推荐，仅适用于不需要热更新的场景）
如果不需要本地热更新功能，可以在入口文件src/index.js最顶部添加以下代码，定向屏蔽该报错，不会影响其他控制台错误输出：

if (process.env.NODE_ENV === 'development') {
  const originError = window.console.error
  window.console.error = (...args) => {
    if (typeof args[0] === 'string' && args[0].includes('sockjs-node') && args[0].includes('WebSocket connection to')) return
    originError.apply(console, args)
  }
}

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