Android 中的离子 5/电容器 ERR_CLEARTEXT_NOT_PERMITTED

Question

我正在使用 Capacitor 构建 Ionic 应用程序。这些是以下命令运行以便在 Android Studio 中打开 android 应用程序。

npx cap add android
ionic build
npx cap copy
npx cap open android

在 Android Studio 中，我运行构建并单击运行，之后我在我的设备中看到错误 net::ERR_CLEARTEXT_NOT_PERMITTED。我看到很多帖子都有同样的错误，但那些都是 Cordova 构建的。就我而言，我没有使用 Cordova 来准备 android 应用程序。

以下是我的 Ionic 应用程序的一些摘录。

capacitor.config.json文件

{
  "appId": "com.abc",
  "appName": "abc",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "www",
  "cordova": {
    "preferences": {
      "ScrollEnabled": "false",
      "android-minSdkVersion": "19",
      "BackupWebStorage": "none",
      "SplashMaintainAspectRatio": "true",
      "FadeSplashScreenDuration": "0",
      "SplashShowOnlyFirstTime": "false",
      "SplashScreen": "none",
      "SplashScreenDelay": "0"
    }
  },
  "server": {
    "url": "http://192.168.1.208:8100"
  }
}

我在 Android Studio

的 LogCat 中也看到了这个错误

W/cr_AwContents: Application attempted to call on a destroyed WebView
    java.lang.Throwable
        at org.chromium.android_webview.AwContents.a(PG:127)
        at org.chromium.android_webview.AwContents.a(PG:209)
        at com.android.webview.chromium.WebViewChromium.evaluateJavaScript(PG:8)
        at android.webkit.WebView.evaluateJavascript(WebView.java:1113)
        at com.getcapacitor.cordova.MockCordovaWebViewImpl.run(MockCordovaWebViewImpl.java:203)
        at android.os.Handler.handleCallback(Handler.java:873)
        at android.os.Handler.dispatchMessage(Handler.java:99)
        at android.os.Looper.loop(Looper.java:193)
        at android.app.ActivityThread.main(ActivityThread.java:6923)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:870)

Answer 1

这 post 帮助我找到了问题的解决方案。

我删除了 capacitor.config.json 文件中的字段 server 以使其正常工作。

"server": {
    "url": "http://localhost:8100"
}

现在我的 capacitor.config.json 看起来像

{
  "appId": "com.abc",
  "appName": "abc",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "www",
  "cordova": {
    "preferences": {
      "ScrollEnabled": "false",
      "android-minSdkVersion": "19",
      "BackupWebStorage": "none",
      "SplashMaintainAspectRatio": "true",
      "FadeSplashScreenDuration": "0",
      "SplashShowOnlyFirstTime": "false",
      "SplashScreen": "none",
      "SplashScreenDelay": "0"
    }
  }
}

Answer 2

将此添加到 AndroidManifest.xml 中的 application 元素

<application
    android:usesCleartextTraffic="true"

Answer 3

只需运行这个命令：

ionic capacitor run android -l --ssl

Answer 4

当您在 Capacitor 配置中指定 server 时，您应该将 server.cleartext 设置为 true 以防止发生此问题。示例：

{
  "appId": "com.abc",
  "appName": "abc",
  "npmClient": "npm",
  "server": {
    "url": "http://192.168.1.208:8100", 
    "cleartext": true
  }
}

这不是很好的记录 - 我发现使用此配置的唯一地方是 https://capacitorjs.com/docs/guides/live-reload

Answer 5

虽然上述解决方案可能有效，但也值得检查您的 Web 资产是否已正确复制到 android/app/src/main 目录，因为同样的 net::ERR_CLEARTEXT_NOT_PERMITTED 错误会由于缺少 index.html.

在某些情况下，例如当cap sync无法删除之前的assets目录时，文件复制不正确，但进程不会报错退出。

Answer 6

这对我有用： https://www.basezap.com/fix-leartext-error-for-websites/

在 app/manifests/AndroidManifest.xml 编辑应用程序标签添加 android:usesCleartextTraffic="true" 属性

Answer 7

您可以通过在 capacitor.config 文件中启用它来允许 Web 视图中的 cleartext 流量，方法是添加以下代码

server: {
  cleartext: true
}

构建您的项目以查看更改

ionic capacitor build android

Answer 8

将此代码添加到 capacitor.config 中：服务器： { 明文：真 }

Answer 9

进入 capacitor.config.json 并添加 cleartext: true 属性：

"server": {
  "cleartext": true
}

然后，运行 npx cap copy，再次启动服务器，re-compile 和运行来自您的 IDE (Xcode/AndroidStudio) 的项目.

Answer 10

在 android>src>main>res>xml>network_security_config.xml

下创建一个文件

<?xml version="1.0" encoding="utf-8"?>
  <network-security-config>
     <domain-config cleartextTrafficPermitted="true">
     <domain includeSubdomains="true">192.168.1.208</domain>
     </domain-config>
  </network-security-config>

然后在您的 AndroidManifest.xml 应用程序标签内添加

android:networkSecurityConfig="@xml/network_security_config"

Android 中的离子 5/电容器 ERR_CLEARTEXT_NOT_PERMITTED

Ionic 5/Capacitor ERR_CLEARTEXT_NOT_PERMITTED in Android

android

ionic-framework

capacitor

ionic5