React应用程序使用错误的网络适配器启动

Question

更新

此更新下面的所有内容都是从我没有将问题缩小到使用了错误的网络改编。话虽如此：

我的React应用程序是使用Create React app创建的，使用npm start运行，使用的是我的虚拟盒子网络，而不是我的WLAN适配器，这意味着我无法使用网络上的设备连接我的应用程序。如何使我的应用程序使用正确的网络适配器？我不想禁用虚拟盒适配器，因为它很有用。

---

尽管有npm start的输出，但无法在同一网络上的设备上查看My React应用程序(如下)。浏览器显示ERR_CONNECTION_REFUSED。

Compiled successfully!
You can now view untitled in the browser.
Local:            http://localhost:3000/
On Your Network:  http://192.168.56.1:3000/
Note that the development build is not optimized.
To create a production build, use npm run build.

• 我试过从WebStorm中运行npm startWindows Powershell

• Node.js可以通过防火墙

• 我正在使用新安装的Windows 10(没有奇怪的设置)
• 我已尝试使用192.168.56.1:3000从本地网络上的3个不同设备进行连接
• 我已经重新启动电脑两次了
• 我已经在关闭主机防火墙的情况下尝试了所有这些
• 我用Create React App创建的一个空白项目复制了所有这些
• 我也试过端口4000

我们显然非常感谢您的帮助。

更新

在我的Windows 10笔记本电脑上，我得到了ERR_CONNECTION_REFUSED，但在我测试过的另外两台设备上，我收到了ERR_COCONNECTION_ABORTED(一台iPad和一部Android手机，都与主机在同一网络上)。

Answer 1

我遇到过类似的问题，npm start为Windows上的LAN网络选择了错误的ip/网络适配器。

IP在react-dev-utils/WebpackDevServerUtils.js:preapreUrls内部解析通过调用在address/lib/address.js内部实现的方法address.ip

在Windows上，他们使用他们找到的第一个接口IPv4，这就是问题的原因。

最简单的方法是"；"修复"；它将设置HOST环境变量，该变量将一起绕过接口查找。

--

一个快速的"；"修复"；接口查找将修改此处的线路

来自

lanUrlForConfig = address.ip();

至

lanUrlForConfig = address.ip("<Name of your interface>");；