Title: Mixed Content Error when launching Ionic application in Android Studio

Question

I have developed a hybrid application using Ionic with Angular for the frontend and Spring Boot for the backend REST API. When attempting to launch my application in Android Studio, I encounter a mixed content error.

When i launch ionic everything works perfectly but when i deploy it in android i cant log in

Error: In the application console, I receive the following error:

"Mixed Content: The page at 'https://localhost/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://AdressIp:Port/doctors/login'. This request has been blocked; the content must be served over HTTPS."

I added this line on Manifest but still the same problem :

android:usesCleartextTraffic="true"

Answer 1

1. In your android/app/src/main/AndroidManifest.xml add android:usesCleartextTraffic="true".

<application 
       ...
       android:usesCleartextTraffic="true">

2. In your capacitor.config.ts set the config as below:

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

const config: CapacitorConfig = {
  appId: 'io.ionic.starter',
  appName: 'My Capacitor App',
  webDir: 'www',
  bundledWebRuntime: false,
  android: {
    allowMixedContent: true
  }
};

export default config;

Answer 2

if you are using capacitor, check this section "allowMixedContent" in https://capacitorjs.com/docs/config , greetings.