如何使用手机打开localhost：4200？

Question

我的手机和电脑都在同一个wifi上。当我运行ng serve时，我使用我的电脑在Chrome中打开localhost：4200，这是有效的。

但我用我的手机打开192.168.1.107:4200，但它不起作用。

当我使用create-react-app时。有用。

绿色是有棱角的。白是反应

Answer 1

为了使您的服务器在本地网络中可用，您需要使用以下命令：

ng serve --host 192.168.1.107

然后，该应用将在192.168.1.107:4200网络中的每台设备上提供。

如果你不知道你的LAN地址是什么，你可以在基于unix的操作系统上执行ifconfig | grep broadcast - 第一个IP是你的计算机，或ipconfig在Windows机器上。

Answer 2

您的图片显示您的PC的IP地址为192.108.1.107:4200 。您表示您尝试使用以下IP端口组合访问角度应用：

192.168.1.107:4200

假设这不是拼写错误，使用以下IP：端口组合var user; (async function(){ await model.findOne({},(err,users)=>{ user=users; console.log(user); }); console.log(user); })(); 应该允许您访问角度应用。

Answer 3

如果您的手机和计算机连接到同一网络（Wifi，LAN），则可以使用计算机本地IP地址（不是公共IP地址）从手机连接到计算机。

注意：您应该在计算机防火墙中添加入站角色以允许通过移动设备访问计算机。

Answer 4

同一无线网络上的Linux机器+ Android手机：

1. 获取您的计算机IP

  

ifconfig -a

.
.
wlp3s0: flags=4163<UP,BROADCAST,RUNNING,MULTICAST>  mtu 1500
      inet 192.168.1.199  netmask 255.255.255.0  broadcast 192.168.1.255

     

我的机器结果：网络接口wlp3s0，IP 192.168.1.199

1. 获取电话IP

consult your phone, 
normally in Settings > About device > Status

Result: my phone IP is 192.168.1.196

1. 在开发计算机上的wlp3s0接口上打开端口4200（仅电话IP），并以root用户身份登录：

  

ufw允许wlp3s0从192.168.1.196进入任何端口4200

阅读ufw手册页！！！ -做错事会使您的机器容易受到攻击

  

ufw状态

 Status: active

 To                         Action      From
 --                         ------      ---- 
 4200 on wlp3s0             ALLOW       192.168.1.196

1. 为您的应用提供192.168.1.199

  

ng服务-主机192.168.1.199

1. 从台式机和手机连接到

  

192.168.1.199:4200

1. 替代-投放至0.0.0.0

  

ng服务-主机0.0.0.0

     

来自您的计算机：localhost：4200
  从您的电话：192.168.1.199:4200

您可能需要或不需要-disable-host-check

1. 完成后重置防火墙

  

ufw重设
  ufw enable
  ufw状态

Answer 5

我不确定该命令是否在Angular 8中更改了，但是其中的 none 都对我没有帮助。

我要做的就是手动指定端口，等等！

ng s --host 0.0.0.0 --port 4200

（请注意，您也可以使用实际IP地址代替0.0.0.0；这对我都有用。）

Answer 6

• 电话操作系统-Android v.9
• 台式机操作系统-Windows 10
• Web浏览器（在手机和台式机上）-Google Chrome

---

1. 通过本教程设置手机-> Chrome Remote debugging
2. 通过此命令ng serve --public-host运行您的角度应用程序（应用程序应在localhost:4200上运行）
3. 确保您的台式机和手机连接到同一网络

4. 您需要进行端口转发，这要感谢Chrome DevTools的确非常简单！

   • 教程-> Chrome Access Local Servers
   • 您只需要转发一个端口，只需单击Add rule（请参阅Tutorial）中Remote devices标签中的settings按钮，即可完成此操作，然后进入Device port输入4200，然后输入Local address到localhost:4200
   • 在我的场景中，我还需要转发其他端口，因为我也在本地主机上运行后端服务器，后端也在localhost:5010上运行，因此我只是像上面{{1}所说的那样添加新规则}和Device Port: 5010

5. 您现在可以在手机上访问Local address: localhost:5010，它会显示您的应用

   • 最好的部分是，您可以从桌面DevTools中打开在手机中打开的选项卡的DevTools，并可以从桌面轻松调试手机上的页面（检查元素，查看控制台等...）。在代码中进行更改后，页面也会重新加载...

Answer 7

您也可以使用 ngrok 创建一个隧道来拥有公共 URL。安装此程序，使用下一个命令在命令行中打开它：

ngrok http 3000