React项目无法通过IPv4局域网地址访问问题排查求助

可能的原因 #

• 公司网络安全策略拦截：公司设备的防火墙、端点安全软件或网关可能限制了局域网内对开发端口（3000）的访问，或者阻止开发服务器绑定到非本地IP地址，导致请求被截断返回502错误。
• React开发服务器绑定范围限制：默认情况下，create-react-app的开发服务器仅监听localhost（127.0.0.1），不会响应局域网其他IP的请求，这会导致外部设备无法通过你的IPv4地址访问。
• 代理或VPN干扰：公司网络的代理服务器可能错误转发了请求，或者你设备上的VPN连接切换了网络环境，导致局域网IP的请求无法到达开发服务器。
• 网卡配置异常：公司设备可能有多网卡配置，开发服务器误绑定到了非当前局域网的网卡（比如VPN虚拟网卡），导致局域网设备无法连接。

修复建议 #

• 强制开发服务器监听所有网卡：
  修改package.json中的start命令：

  • Mac/Linux：

    "scripts": {
      "start": "HOST=0.0.0.0 PORT=3000 react-scripts start"
    }
    

  • Windows：

    "scripts": {
      "start": "set HOST=0.0.0.0 && react-scripts start"
    }
    

  或者在项目根目录创建.env文件，添加：

  HOST=0.0.0.0
  PORT=3000
  

  这样服务器会监听所有可用网卡的3000端口，局域网设备就能通过你的IPv4地址访问。

• 排查网络拦截规则：

  • 临时关闭本地安全软件（需符合公司安全规范），测试是否能访问。
  • 联系公司IT部门，确认是否有针对3000端口的局域网访问限制，申请临时开放权限。

• 验证网络环境：

  • 执行ipconfig（Windows）或ifconfig（Mac/Linux），确认你使用的是当前WiFi/网线对应的IPv4地址，避免混淆多网卡的IP。
  • 关闭设备上的VPN连接，确保处于同一局域网环境。

• 测试端口连通性：
  在同局域网的其他设备上执行命令：

  # Windows
  telnet 你的IPv4地址 3000
  # Mac/Linux
  nc -zv 你的IPv4地址 3000
  

  如果连接失败，说明端口确实被拦截，需要联系IT处理；如果连接成功，再排查浏览器或代理设置。

• 绕过代理干扰：
  在.env文件中添加代理排除规则：

  NO_PROXY=localhost,127.0.0.1,你的IPv4地址
  

  同时在浏览器设置中关闭自动代理，避免请求被公司代理服务器错误转发。

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