访问本地服务器

优质

小牛编辑

145浏览

2023-12-01

在开发机的Web服务器上托管一个站点，然后在Android设备上访问站点内容。

通过USB数据线和Chrome DevTools，您可以在开发机上运行站点，然后在Android设备上查看该网站。

TL;DR

端口转发可以使你在Android设备上查看开发机Web服务器中的内容。
如果你的Web服务器使用自定义域，您可以将Android设备设置为使用自定义域映射访问该域中的内容。

设置端口转发

端口转发功能可以让你的Android设备访问托管在开发机Web服务器上的内容。端口转发通过映射到开发机上TCP端口的Android设备上创建侦听TCP端口来工作。端口之间的流量通过链接Android设备和开发机之间的USB数据线传输，因此连接不依赖于你的网络配置。

若要启用端口转发︰

在开发机和Android设备之间设置远程调试。当你完成后，您应该可以在Inspect Devices(检查设备)对话框的左侧菜单中看到你的Android设备，并且处于Connected(已连接)状态。
在DevTools的Inspect Devices(检查设备)对话框中，勾选启用Port forwarding(端口转发)。
点击Add rule(添加规则)。
在左侧的Device port(设备端口)文本字段中，输入你希望在Android设备上要访问站点的 localhost(本地主机)端口号。例如，如果你要访问localhost:5000网站，则输入5000。
在右侧的Local address(本地地址)文本字段中，输入你开发机的Web服务器上运行网站的IP地址或主机名，后跟端口号。例如，如果您的网站运行在localhost:7331上，则可以输入localhost:7331。
点击Add(添加)。

现在，端口转发已设置完成。您可以在Inspect Devices(检查设备)对话框中的设备选项卡上查看端口的状态指示器。

要查看内容，在你的Android设备上打开Chrome，然后打开您在Device port(设备端口)文本字段中指定的localhost端口。例如，如果在字段中输入5000，那么你将打开localhost:5000。

映射自定义本地域

自定义域映射使你可以在Android设备上，查看来自正在使用自定义域的开发机上的Web服务器的内容。

例如，假设您的站点使用了只能在chrome.devtools白名单内才能工作的第三方JavaScript库。因此，您需要在开发机上的 hosts 文件中创建一个条目，将此域映射到localhost（例如：127.0.0.1 chrome.devtools）。设置自定义域映射和Port forwarding(端口转发)后，您可以在Android设备上查看在网址为chrome.devtools的网站。

设置端口转发到代理服务器

要映射自定义域，必须在开发计算机上运行代理服务器。代理服务器的示例有Charles，Squid和Fiddler。

要设置Port forwarding(端口转发)到代理：

运行代理服务器并记下它使用的端口。注意：代理服务器和Web服务器必须在不同的端口上运行。
设置Port forwarding(端口转发)到您的Android设备。对于Local address(本地地址)字段，输入localhost:，后面跟你代理服务器运行的端口。例如，如果它在端口8000上运行，那么您将输入localhost:8000。在Device port(设备端口)字段中只需要输入想在希望Android设备上进行监听的端口号，例如3333。

在你的设备上配置 proxy 设置

接下来，您需要配置Android设备与代理服务器通信。

在Android装置上前往 Settings(设置) > Wi-Fi。
长按您当前连接的网络的名称。 注意： 代理设置适用于每个网络。
点按Modify network(修改网络)。
点击Advanced options(高级选项)。将显示代理设置。
点击Proxy(代理)菜单，然后选择Manual(手动)。
在Proxy hostname(代理主机名)字段中请输入localhost。
在Proxy port(代理端口)字段中，输入你在上一部分说明中为Device port(设备端口)字段设置的端口号。
点击Save(保存)。

使用这些设置，你的设备将把其所有请求转发到开发机的代理上。代理代表你的设备发出请求，因此访问自定义域的问题才得以解决。

现在，你可以在Android设备访问自定义域，就像在开发机上一样。

如果你的Web服务器运行的是非标准端口，记住在Android设备请求内容时指定端口。例如，如果您的Web服务器在端口7331上使用自定义域chrome.devtools，当您从Android设备查看网站时，您应该使用网址chrome.devtools:7331。