Ionic Capacitor Android App can't access Internet

[rbarped]

I have an Ionic + Vue project and I’m using Capacitor to add the Android platform to my project. The app runs correctly both on the Virtual Device and on my Xiaomi Mi A2, as it shows my Login screen I created. However, when I enter my credentials, it doesn’t connect to the server I'm trying to log into.

This is my login method:

async login() {
      try {
        const response = await axios.post('http://secure.example.com/login', {
          email: this.email,
          password: this.password
        });

        if (response.data.success) {
          const token = response.data.data.token;
          localStorage.setItem('token', token);
          this.showToast('Has iniciado sesión');
          this.$router.push('/Home');
        } else {
          this.showToast('Credenciales inválidas. Inténtalo de nuevo');
        }
      } catch (error) {
        console.error('Error en el login:', error);
        this.showToast('El login ha fallado. Inténtalo de nuevo más tarde');
      }
    },
    showToast(message) {
      this.toast.message = message;
      this.toast.isOpen = true;
    }

Details:

• Android version on Virtual Device: Android R.
• Android version on Xiaomi Mi A2: Android 10.
• The login URL uses the HTTP protocol.
• I’m using Axios (not sure if this is important).

Things I’ve tried:

1. Adding android:usesCleartextTraffic="true" to AndroidManifest.xml.

2. Creating a security_network_config.xml file:

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

and adding <application ... android:networkSecurityConfig="@xml/network_security_config" ...>
to the AndroidManifest.xml.

None of this has worked for me. What should I do?

Note: I'm trying to learn, so probably my code is not optimal or may have errors, so any detailed answer would be very much appreciated. Thank you!

---

UPDATE: I managed to solve the problem and now I can successfully log in and everything in my app works well.
This is the solution I found that works for me.
I added this code fragment into capacitor.config.ts

import { CapacitorConfig } from '@capacitor/cli';
import { CapacitorHttp, HttpResponse } from '@capacitor/core';

const config: CapacitorConfig = {
  appId: 'io.ionic.starter',
  appName: 'smart-home-app',
  webDir: 'dist',
  server: {
    androidScheme: 'http',
    cleartext: true,
  },
  android: {
    allowMixedContent: true 
  },
  plugins: {
    CapacitorHttp: {
      enabled: true
    },
  }
};

export default config;

Also, I added this line: android:usesCleartextTraffic="true" to AndroidManifest.xml.