鸿蒙Next中react-native-webview无法访问本地ip启动的网页怎么办

在鸿蒙Next系统中使用react-native-webview组件时，发现无法访问通过本地IP启动的网页（例如http://192.168.x.x:3000），控制台显示网络连接失败。已确认同一网络下其他设备能正常访问该地址，且Android/iOS原生WebView可正常加载。尝试过以下方法仍未解决：

  1. 添加android:usesCleartextTraffic=“true”
  2. 配置网络安全策略允许HTTP请求
  3. 检查鸿蒙网络权限声明 请问该如何解决这种本地IP访问被拦截的问题？是否需要针对鸿蒙系统进行特殊配置？
2 回复

哈哈，程序员遇到“本地IP被拒”的尴尬，就像外卖小哥被门禁卡住！试试这几招：

  1. 检查鸿蒙网络权限，别让WebView“断网”
  2. 本地服务用http://localhost:端口，别用IP（鸿蒙可能拦路）
  3. 开发时临时关掉CORS检查（记得上线改回来！）
  4. 终极方案：给WebView开个android:usesCleartextTraffic="true"后门

要是还不行…建议直接和鸿蒙官方对线，毕竟新系统总有些“惊喜”😉

更多关于鸿蒙Next中react-native-webview无法访问本地ip启动的网页怎么办的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next中，如果React Native WebView无法访问本地IP（如http://localhost或http://192.168.x.x）启动的网页，通常是由于网络权限或安全策略限制。以下是解决方案：

1. 检查网络权限

确保应用已申请网络访问权限：

  • 在module.json5文件中添加：
{
  "module": {
    "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ]
  }
}

2. 使用设备IP替代localhost

  • 本地服务器使用localhost时，WebView可能无法识别。改用设备的局域网IP（如http://192.168.1.100:8080）。
  • 在终端输入ipconfig（Windows）或ifconfig（Mac/Linux）获取本机IP。

3. 允许WebView访问非安全源

在WebView组件中显式允许HTTP访问：

<WebView
  source={{ uri: "http://192.168.1.100:3000" }}
  allowsInlineMediaPlayback
  javaScriptEnabled
  mixedContentMode="compatibility" // 允许加载HTTP资源
  originWhitelist={['*']} // 允许所有源（慎用）
/>

4. 鸿蒙网络安全配置

  • 若鸿蒙系统默认阻止HTTP流量，需在entry/src/main/resources/rawfile/network_security_config.xml中创建配置：
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <base-config cleartextTrafficPermitted="true">
    <trust-anchors>
      <certificates src="system"/>
    </trust-anchors>
  </base-config>
</network-security-config>
  • 在module.json5中引用：
{
  "module": {
    "networkSecurityConfig": "$rawfile:network_security_config.xml"
  }
}

5. 验证服务器可访问性

  • 在设备浏览器中直接输入URL，确认网页可正常加载。
  • 关闭防火墙或添加端口例外（开发环境临时方案）。

6. 使用反向代理（备选）

通过本地工具（如ngrok）将HTTP服务暴露为HTTPS域名：

ngrok http 3000

注意事项：

  • 生产环境避免使用HTTP或originWhitelist={['*']}，确保符合安全规范。
  • 鸿蒙Next可能对WebView有额外限制，请关注官方文档更新。

按以上步骤操作后，WebView应能正常访问本地IP网页。

回到顶部