Ionic Vue 6 CapacitorHttp not working in android apk

Question

I have a problem driving me insane. My app is an Ionic Vue 6 app with Capacitor. Running the app with the usual commands works on both physical devices and emulators:

ionic capacitor run android -l --external

and

ionic capacitor run ios -l -async -await --external

Going further, building the app, Archiving and publishing for review to the Apple App store works just fine as I've been going back and forth with the review team over certain features.

But the problem is that when the app is bundled as an apk (both debug and release), or bundled and signed, all HTTP requests to my server stop working. After forcing console.log in production, the error message is useless:

Error
at returnResult (VM3:760:32)
at Object.win.androidBridge.onmessage (VM3:735:21)

I have tried:

Adding android:usesCleartextTraffic="true" to the application tag in AndroidManifest.xml
Adding <uses-permission android:name="android.permission.INTERNET" /> but to be fair, this has always been there
Adding a network_security_config.xml file with the following content:

<base-config cleartextTrafficPermitted="true">
    <trust-anchors>
        <certificates src="system" />
    </trust-anchors>
</base-config>
<domain-config cleartextTrafficPermitted="true">
    <domain includeSubdomains="true">localhost</domain>
</domain-config> </network-security-config>

Double-check that my server has no cors issues, and is https. And I tested the https link in https://www.ssllabs.com/ssltest and it has no issues.
I also updated Google Chrome and Webview on the Android device.

Nothing just works. It works on iOS, my laptop's browser, when I run with live reload on both iOS and Android devices and emulators. But not when the app has been bundled into an apk.

This is my capacitor.config.ts

import { CapacitorConfig } from "@capacitor/cli";

const config: CapacitorConfig = {
  appId: "com.xxxx.xxxx", 
  appName: "MyApp",
  webDir: "dist",
  bundledWebRuntime: false,
  android: {
    allowMixedContent: true,
  },
  plugins: {
    CapacitorCookies: {
      enabled: true,
    },
    CapacitorHttp: {
      enabled: true,
    },
    PushNotifications: {
      presentationOptions: ["badge", "sound", "alert"],
    },
    SplashScreen: {
      launchShowDuration: 3000,
      launchAutoHide: true,
      launchFadeOutDuration: 3000,
      backgroundColor: "#ffffff",
      androidSplashResourceName: "splash",
      androidScaleType: "CENTER_CROP",
      showSpinner: true,
      androidSpinnerStyle: "large",
      iosSpinnerStyle: "small",
      spinnerColor: "#999999",
      splashFullScreen: true,
      splashImmersive: true,
      layoutName: "launch_screen",
      useDialog: true,
    },
  },
};

export default config;

Can anyone help with this?

Ionic Vue 6 CapacitorHttp not working in android apk

0 Answers0