我可以使用Android模拟器访问我的笔记本电脑web服务器,我使用10.0.2.2:portno 工作得很好。
但当我连接真正的Android手机时,手机浏览器无法连接到我笔记本电脑上的同一个web服务器。手机和笔记本电脑通过USB线连接。如果我运行 adb devices命令,我可以看到我的手机。
我错过了什么?
我可以使用Android模拟器访问我的笔记本电脑web服务器,我使用10.0.2.2:portno 工作得很好。
但当我连接真正的Android手机时,手机浏览器无法连接到我笔记本电脑上的同一个web服务器。手机和笔记本电脑通过USB线连接。如果我运行 adb devices命令,我可以看到我的手机。
我错过了什么?
当前回答
最简单的方法(这对我来说完美无缺)是在0.0.0.0:<port_no>本地托管您的站点,并使用移动设备访问它,在浏览器中使用<local_ipv4_address>:<port_no>/<path>。
要知道您的本地ipv4地址,只需在cmd中键入ipconfig 任何连接到同一网络的设备都可以访问这个url。
其他回答
因为这是一个老问题,有一个新的方法来做这个非常非常简单。下载ADB Chrome扩展,然后按照这些说明:
https://developers.google.com/chrome-developer-tools/docs/remote-debugging
这些回答中没有一个提到从Windows防御防火墙打开Apache HTTP服务器。使用XAMPP v. 5.6.40,您可以尝试以下解决方案:
Go to Windows Defender Firewall, click on Inbound rules and look for Apache HTTP Server. There will be two instances of this rule. Double click on it and set the Action to Allow the connection. Go to the Advanced tab and tick Domain, Private, and Public options from the Profiles section. Go to the Protocols and Ports tab and configure your local ports. By default, XAMPP server runs on port 80. If you're using multiple ports for web development, simply place commas after each port. Save your changes. Run cmd and type ipconfig. Take note of your IP Address. Restart Apache from your XAMPP Control Panel. Try accessing your app via address:port/path, where address is your IP address, port is your port (80 in most cases), and path to your project in /xampp/htdocs.
其实很简单。
打开你的Android手机/路由器的WiFi热点,连接你的 从笔记本电脑到手机 在本地主机启动服务器(我使用WAMP服务器的Windows) 现在打开命令提示符并输入
ipconfig
一旦你这样做了,你会看到如下内容:
Wireless LAN adapter Wireless Network Connection: Connection-specific DNS Suffix . : Link-local IPv6 Address . . . . . : fe80::80bc:e378:19ab:e448%11 IPv4 Address. . . . . . . . . . . : 192.168.43.76 Subnet Mask . . . . . . . . . . . : 255.255.255.0 Default Gateway . . . . . . . . . : 192.168.43.1
复制IPv4地址(在本例中为192.168.43.76) 在您的移动浏览器中,只需粘贴IPv4地址
注意:请将网络设置为“家庭网络”。将网络设置为家庭网络意味着您允许您的PC与同一网络上的其他设备共享内容。
如果你使用的是Windows 10,可以通过以下方法完成:
打开设置 去网络和互联网 在左侧菜单中选择WiFi 点击已连接WiFi的名称 配置网络的“网络配置文件”为“私有”
如果你遇到了问题,很可能是Windows防火墙的问题。
开放式控制面板 进入Windows防御防火墙 点击“允许一个应用程序或功能通过Windows防御防火墙” 检查应用程序是否启用了专用网络(应该有一个勾号) 如果未启用,请轻按“更改设置”,然后勾选应用程序“私有”下的复选框
Mac OS X用户
我通过启用远程管理实现了这一点:
确保你的手机和笔记本电脑连接到同一个WiFi网络 在Mac上,进入系统首选项/共享 开启远程管理
你会看到一条类似这样的消息:
其他用户可以使用some.url.com地址管理您的计算机
在你的Android设备上,你现在应该能够访问some.url.com,它委托给Mac上的localhost。你也可以使用ifconfig来获得Mac的IP地址。
ngrok的可移植解决方案(任何带有Node.js的操作系统)
如果你不介意用临时域名公开你的项目,你可以使用ngrok。假设我有一个在localhost:9460上运行的应用程序,我可以简单地编写
npm install ngrok -g
ngrok http 9460
这将给我:
Session Status online Update update available (version 2.2.8, Ctrl-U to update) Version 2.2.3 Region United States (us) Web Interface http://127.0.0.1:4040 Forwarding http://f7c23d14.ngrok.io -> localhost:9460 Forwarding https://f7c23d14.ngrok.io -> localhost:9460 Connections ttl opn rt1 rt5 p50 p90 0 0 0.00 0.00 0.00 0.00
我现在可以通过https://f7c23d14.ngrok.io远程查看localhost。这是与客户分享设计工作或进展的好机会。
替代解决方案与nginx代理通过
如果你通过nginx proxy_pass运行类似这样的东西,它将需要更多的调整-这是一个hack方法,但它适用于我,我对改进它的建议是开放的:
启用远程管理(如上所述) 临时将服务器设置为监听81端口,而不是80端口 输入以下命令:
sudo nginx -s reload
访问http://youripaddress: 81
server {
listen 80;
listen 81; # <-------- add this to expose the app on a unique port
server_name ~^(local|local\.m).example.com$;
# ...
}
重新加载并访问http://youripaddress:81
最简单的方法(这对我来说完美无缺)是在0.0.0.0:<port_no>本地托管您的站点,并使用移动设备访问它,在浏览器中使用<local_ipv4_address>:<port_no>/<path>。
要知道您的本地ipv4地址,只需在cmd中键入ipconfig 任何连接到同一网络的设备都可以访问这个url。