修改HOST文件后如何实现React应用的远程访问？

这问题我之前也碰到过，核心原因是你设置的HOST=localhost.domain.com让React开发服务器只绑定到了本地回环地址，导致局域网内的手机无法访问。

为什么会出现这个问题？ #

当你在package.json的scripts里指定HOST=localhost.domain.com时，React的dev server会把服务绑定到这个域名对应的IP地址——也就是你在/etc/hosts里配置的127.0.0.1。这意味着服务只会监听本地的回环接口，局域网内的其他设备（比如你的手机）根本无法连接到这个地址。

而当你移除HOST参数时，react-scripts会默认把服务绑定到0.0.0.0，这个地址代表所有可用的网络接口，包括你的局域网IP（192.168.100.3），所以手机就能正常访问了。

解决方案一：兼顾自定义域名访问和局域网远程访问（推荐） #

修改package.json里的start命令，把HOST设置为0.0.0.0：

"start": "cross-env HOST=0.0.0.0 PORT=3001 HTTPS=true react-scripts start"

这样配置后：

• 你的手机可以通过https://192.168.100.3:3001正常访问应用
• 你自己在Mac上依然可以通过https://localhost.domain.com:3001访问（因为/etc/hosts的映射还生效）

解决方案二：绑定自定义域名到局域网IP（适合需要用域名访问的场景） #

如果你希望手机也通过localhost.domain.com访问，可以修改/etc/hosts，把你的局域网IP也映射到这个域名：

127.0.0.1 localhost.domain.com
192.168.100.3 localhost.domain.com

然后保持start命令不变：

"start": "cross-env HOST=localhost.domain.com PORT=3001 HTTPS=true react-scripts start"

不过这个方法需要额外在你的手机上配置hosts（把localhost.domain.com指向192.168.100.3），操作起来比方案一麻烦，所以更推荐方案一。

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