如何在同一局域网的手机上访问本地React JS应用

1. 修改开发服务器绑定地址 #

create-react-app默认仅绑定localhost，局域网设备无法访问。需让服务器绑定到0.0.0.0：

• Linux/macOS：修改项目package.json的scripts字段，将start改为："start": "HOST=0.0.0.0 react-scripts start"
• Windows：修改为："start": "set HOST=0.0.0.0 && react-scripts start"
  重启npm start后，用电脑局域网IP+端口访问，再用手机测试同一地址。

2. 关闭或配置电脑防火墙 #

Windows Defender或第三方防火墙可能拦截3000端口的入站请求：

• 临时关闭防火墙测试，若能访问，给node.exe或3000端口添加私有网络入站允许规则。

3. 检查端口状态与路由器设置 #

• 用netstat -ano | findstr :3000（Windows）或lsof -i :3000（Linux/macOS）检查3000端口是否被占用，若占用可换端口启动：PORT=3001 npm start
• 部分路由器有端口隔离功能，进入路由器后台关闭该设置，确保同网段设备可互访。

4. 确认设备网段一致性 #

• 电脑通过ipconfig（Windows）或ifconfig（Linux/macOS）查看IPv4地址（如192.168.1.x），手机查看WiFi详情中的IP，确保前三位网段一致，否则调整网络设置使设备处于同一私有网络。

5. 调整手机浏览器安全设置 #

部分手机浏览器的严格安全模式会阻止非HTTPS本地请求，可在浏览器设置中关闭相关限制，或开启“允许不安全内容”选项（仅针对本地地址）。

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