npm start启动React项目时localhost无法访问但局域网地址可正常打开

问题原因说明 #

这个问题和项目使用TypeScript没有任何关联，是本地回环地址解析、服务监听配置类的问题，可按以下步骤逐一排查解决：

• 首先验证基础连通性：直接在浏览器访问http://127.0.0.1:3000，如果可以正常打开，说明是localhost的解析异常导致的问题。打开系统hosts文件确认配置：
  • Windows系统路径：C:\Windows\System32\drivers\etc\hosts
  • Mac/Linux系统路径：/etc/hosts
    确保文件中存在127.0.0.1 localhost这条配置，没有被注释或被其他配置覆盖。如果同时存在::1 localhost的IPv6配置，可以先注释该行测试。
• 修改启动脚本绑定地址：在package.json的scripts配置中修改start命令，显式指定服务监听地址：
  • 跨系统通用方案：先安装cross-env依赖npm i cross-env -D，然后将start命令改为"start": "cross-env HOST=0.0.0.0 react-scripts start"，启动后同时支持IPv4/IPv6、本地和局域网访问
  • 仅Mac/Linux使用：可直接写"start": "HOST=0.0.0.0 react-scripts start"
  • 仅Windows cmd使用：可写"start": "set HOST=0.0.0.0&&react-scripts start"
• 排查本地代理/防火墙设置：确认浏览器没有开启全局代理将localhost流量转发到外部，系统防火墙没有拦截127.0.0.1的3000端口访问请求。

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