VSCode打开项目时http://localhost:3000/提示localhost拒绝连接求助

• 确认项目服务是否正常启动

  • 查看VS Code终端，确认是否执行了项目启动命令（如npm start、yarn dev），且无启动报错。若未启动，先执行对应命令；若启动时提示依赖缺失，先运行npm install或yarn install补全依赖。
  • 若启动命令执行后无任何输出，检查项目的启动脚本配置是否正确（比如package.json里的scripts字段）。

• 检查3000端口占用情况

  • Windows系统：打开命令提示符，执行 netstat -ano | findstr ":3000"，找到占用端口的PID，然后在任务管理器中结束对应进程。
  • macOS/Linux系统：在终端执行 lsof -i :3000，获取PID后运行 kill -9 <PID> 终止占用进程。
  • 也可直接修改项目端口为未被占用的数值（如3001）：
    • React项目：修改package.json的start脚本为 "start": "react-scripts start --port 3001"
    • Vue项目：在vue.config.js中添加配置 devServer: { port: 3001 }

• 排查本地网络与防火墙设置

  • 临时关闭本地防火墙或安全软件，测试是否能访问localhost:3000。
  • 检查hosts文件配置：
    • Windows：打开C:\Windows\System32\drivers\etc\hosts，确保包含127.0.0.1 localhost和::1 localhost条目。
    • macOS/Linux：打开/etc/hosts，确认上述条目存在，若被注释则取消注释。

• 重置VS Code相关配置

  • 关闭所有VS Code窗口，重新打开项目并启动服务测试。
  • 禁用VS Code中代理类、网络拦截类插件，重启后再次尝试访问。

内容的提问来源于stack exchange，提问作者Cayenne Ezra Gagno