运行npm start后localhost:3000持续出现连接错误如何解决

React项目执行npm start后localhost:3000连接错误排查方案 #

• 第一步：确认服务启动状态
  查看npm start执行后的终端输出，确认是否有编译成功的提示，若终端存在报错（比如依赖缺失、端口占用类错误），优先按照终端提示修复对应报错。
• 第二步：确认实际监听端口
  若3000端口已被其他本地程序占用，React脚手架默认会询问是否切换到其他端口（比如3001），请以终端输出的实际可访问地址为准，不要固定访问3000端口。也可以执行lsof -i:3000（Mac/Linux）或者netstat -ano | findstr "3000"（Windows）查看3000端口占用情况，手动结束占用进程后重启服务。
• 第三步：验证本地回路访问
  尝试直接访问http://127.0.0.1:3000，如果可以正常打开，说明本地hosts配置异常，需要打开系统hosts文件检查是否存在127.0.0.1 localhost的映射配置，缺少的话手动添加后刷新页面即可。
• 第四步：检查网络代理/防火墙设置
  全局代理、VPN或者系统防火墙可能会拦截本地服务的请求，临时关闭代理、VPN和防火墙后再次尝试访问。
• 第五步：重装依赖重启服务
  若上述步骤都无效，可以删除项目下的node_modules文件夹、package-lock.json文件，重新执行npm install安装依赖后，再次运行npm start启动服务。

用户提供的错误截图：

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