React.js调用Node.js后端API第二次请求报ERR_INTERNET_DISCONNECTED错误

这个报错本质不是设备真的断网，是React本地开发服务被异常请求逻辑打崩，浏览器无法连接到本地开发端口才会抛出net::ERR_INTERNET_DISCONNECTED错误，第二次请求根本没走到后端逻辑。按以下优先级排查修复：

• 优先排查前端请求死循环问题
  90%的同类故障都是请求逻辑写在组件根作用域、或者useEffect依赖配置错误导致的：第一次请求返回后触发state更新、组件重渲染，重渲染又触发新的请求，短时间内生成成百上千个并发请求直接打满开发服务器连接池，服务直接崩溃。
  错误写法示例：

  // 组件每次渲染都会直接执行请求，setState触发重渲染形成死循环
  const PostFeed = () => {
    const [posts, setPosts] = useState([])
    axios.get('/api/feed').then(res => setPosts(res.data))
    return <div className="feed">{/* 内容渲染 */}</div>
  }
  

  正确写法：将数据请求逻辑放入useEffect钩子，配置正确的依赖数组，仅在需要的时机触发请求：

  const PostFeed = () => {
    const [posts, setPosts] = useState([])
    useEffect(() => {
      const getFeed = async () => {
        try {
          const res = await axios.get('/api/feed')
          setPosts(res.data)
        } catch (err) {
          console.error('请求失败:', err)
        }
      }
      getFeed()
    }, []) // 空数组代表仅组件首次挂载时执行一次请求
    return <div className="feed">{/* 内容渲染 */}</div>
  }
  

• 排查后端接口连接泄漏问题
  如果前端没有死循环，检查Node.js后端接口逻辑：是否存在分支收到请求后没有返回响应（没调用res.json()/res.send()/res.end()），导致第一次请求的连接一直挂起占满连接池，第二次请求无法建立连接。所有接口分支包括异常捕获分支，都必须明确返回响应，不能让连接悬空。
• 排查Axios拦截器逻辑
  检查你配置的axios请求/响应拦截器：是否存在拦截器里递归重发请求、没有加重发次数限制的问题。比如接口返回401时自动重发刷新token的逻辑，如果没做次数校验，会无限生成新请求打崩服务。给重发逻辑加最多1-2次的次数限制即可。

故障复现时可以直接在浏览器访问React开发服务默认地址http://localhost:3000，如果页面显示无法访问，就能确认是本地开发服务崩溃，直接查看运行npm run start的终端日志，一般会伴随内存溢出、代理连接超时的明确报错，对应上述场景修复即可。

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