如何通过手机访问React本地localhost？解决访问失败问题

核心问题 #

localhost是电脑本地回环地址，手机无法直接访问，必须用电脑的局域网IP，同时让React服务监听所有网卡（而非仅监听localhost）。

具体解决步骤 #

• 第一步：获取电脑的局域网IP

  • Windows：打开命令提示符，输入ipconfig，找到对应网络适配器（WiFi或以太网）下的IPv4地址，格式类似192.168.x.x
  • Mac/Linux：打开终端，输入ifconfig（或ip addr），找到活跃网卡（比如en0、wlan0）下的inet地址

• 第二步：让React服务监听所有网卡
  方法1：临时启动时设置参数

  • Mac/Linux终端执行：HOST=0.0.0.0 PORT=3000 npm start（端口可换成你需要的3006）
  • Windows命令提示符执行：set HOST=0.0.0.0 && set PORT=3000 && npm start
  • Windows PowerShell执行：$env:HOST='0.0.0.0'; $env:PORT='3000'; npm start

  方法2：永久修改package.json配置
  打开项目根目录的package.json，找到scripts里的start命令，修改为对应系统的格式：

  // Mac/Linux
  "start": "HOST=0.0.0.0 PORT=3000 react-scripts start",
  // Windows cmd
  "start": "set HOST=0.0.0.0 && set PORT=3000 && react-scripts start",
  // Windows PowerShell
  "start": "$env:HOST='0.0.0.0'; $env:PORT='3000'; react-scripts start"
  

  保存后直接运行npm start即可生效

• 第三步：确保设备在同一局域网
  手机和电脑必须连接同一个WiFi（或同一有线局域网）

• 第四步：手机访问应用
  在手机浏览器输入：电脑局域网IP:端口号，比如192.168.1.105:3000

额外排查点 #

• 新版create-react-app可在项目根目录新建.env文件，写入HOST=0.0.0.0，启动服务时会自动读取该配置
• 检查路由器是否开启局域网隔离功能（部分路由器默认开启，会阻止设备间通信）

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