Ionic 3 Android设备Livereload失效问题求助

我来帮你排查这个livereload失效的问题，你已经尝试了设置超时时间、添加防火墙规则和网络权限，但还是遇到了闪屏停留和连接超时的报错，结合你的环境（Ionic 3.9.5 + Cordova Android 7.1.4 + WebView 3.1.2），咱们从以下几个方向入手解决：

1. 先确认设备和电脑的网络连通性 #

这是最基础但容易忽略的点：

• 确保你的Android设备和开发电脑连接的是同一个WiFi网络
• 打开电脑的命令提示符，执行ipconfig找到你的本地IP（比如你提到的192.168.0.102），然后在设备的浏览器里直接访问http://192.168.0.102:8100。如果浏览器也打不开，说明是网络层面的问题，比如路由器开启了AP隔离，或者WiFi本身限制了设备间通信，得先解决这个。

2. 给WebView配置允许访问的规则 #

你用的cordova-plugin-ionic-webview 3.x版本对跨域和本地访问限制比较严格，需要在config.xml里明确添加允许导航的规则：

<!-- 允许访问本地IP的8100和35729端口 -->
<allow-navigation href="http://192.168.0.102:8100/*" />
<allow-navigation href="http://192.168.0.102:35729/*" />
<!-- 也可以放宽到同网段所有IP，方便换IP时不用改配置 -->
<allow-navigation href="http://192.168.0.*:*/*" />

同时，在src/index.html里更新Content-Security-Policy的meta标签，允许加载本地开发服务器的资源：

<meta http-equiv="Content-Security-Policy" content="default-src 'self' http://192.168.0.102:8100 http://192.168.0.102:35729 data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">

3. 解决Android 7+的明文HTTP限制 #

Android 7.0及以上默认禁止明文HTTP请求，而livereload用的是HTTP协议，这很可能是导致超时的关键原因：

1. 在项目的platforms/android/res/xml目录下（如果没有xml文件夹就新建一个），创建network_security_config.xml文件，内容如下：

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <!-- 允许访问你的本地IP -->
        <domain includeSubdomains="true">192.168.0.102</domain>
        <domain includeSubdomains="true">localhost</domain>
    </domain-config>
</network-security-config>

2. 打开platforms/android/AndroidManifest.xml，在<application>标签里添加这个配置的引用：

<application
    ...
    android:networkSecurityConfig="@xml/network_security_config">

4. 清理缓存并指定IP启动livereload #

有时候项目缓存会导致奇怪的问题，先清理再重新构建：

# 清理Android平台的缓存
ionic cordova clean android
# 重新构建debug版本
ionic cordova build android --debug
# 指定你的本地IP启动livereload，而不是默认的0.0.0.0
ionic cordova run android --livereload --consolelogs --address 192.168.0.102

5. 检查端口是否被占用 #

确认8100、35729、53703这几个端口没有被其他程序占用：

• 在Windows命令提示符里执行netstat -ano | findstr :8100，如果有结果，记下PID，然后打开任务管理器找到对应进程结束掉，再重新启动livereload。

6. 调整WebView插件版本 #

cordova-plugin-ionic-webview 3.x和Ionic 3的兼容性可能存在小问题，你可以尝试降级到更稳定的2.x版本：

# 卸载当前版本
ionic cordova plugin rm cordova-plugin-ionic-webview
# 安装2.5.3版本（和Ionic 3兼容性更好）
ionic cordova plugin add cordova-plugin-ionic-webview@2.5.3

如果以上步骤都试过还是不行，可以临时关闭Windows防火墙测试一下，确认是不是防火墙规则没有真正生效。另外，有些路由器的“AP隔离”功能会阻止设备之间的通信，也可以检查一下路由器设置。

内容的提问来源于stack exchange，提问作者Arup Bhattacharya