React项目执行yarn start编译成功但浏览器无法访问localhost:3000求助

核心逻辑差异 #

• yarn start（开发服务）：基于webpack-dev-server运行，编译产物默认存在内存中，依赖自身的HTTP服务处理请求。如果服务启动时端口异常、localhost解析失败、配置限制访问等，会出现控制台显示成功但浏览器无法连接的情况。
• serve -s build（静态服务）：直接读取build目录下的静态文件，用标准HTTP服务对外提供访问，只要构建产物正常，就能正常响应请求，不受开发服务特定配置的影响。

具体排查方向 #

1. 端口绑定或占用异常
   控制台提示使用3000端口，但可能该端口已被其他进程占用，或webpack-dev-server绑定了非本地IP（比如仅绑定内网IP）。可以尝试指定其他端口测试：

   yarn start --port 3001
   

2. localhost解析问题
   本地hosts文件中localhost未正确映射到127.0.0.1，导致浏览器无法解析地址。可以尝试直接访问http://127.0.0.1:3000，或检查hosts文件：
   • Windows路径：C:\Windows\System32\drivers\etc\hosts
   • Mac/Linux路径：/etc/hosts
     确保存在以下映射：

   127.0.0.1       localhost
   ::1             localhost
   

3. 开发服务配置错误
   项目自定义了webpack-dev-server配置（如webpack.config.js或craco.config.js），可能设置了disableHostCheck: false并限制了host，或开启了https但浏览器未信任证书。可临时关闭host检查测试：

   module.exports = {
     devServer: {
       disableHostCheck: true
     }
   }
   

4. 安全软件拦截
   本地防火墙、杀毒软件或浏览器安全插件可能拦截了webpack-dev-server的请求，但允许静态文件服务的请求。可临时关闭相关软件验证是否恢复正常。

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