IONIC 5.2.2: Failed to load resource: net::ERR_CLEARTEXT_NOT_PERMITTED. Standard solution not working

Question

network_security_config.xml

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

config.xml

<platform name="android">
        <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
            <application android:usesCleartextTraffic="true" />
            <application android:networkSecurityConfig="@xml/network_security_config" />
        </edit-config>
        <resource-file src="resources/android/xml/network_security_config.xml" target="app/src/main/res/xml/network_security_config.xml" />
        <resource-file src="google-services.json" target="app/google-services.json" />
        <allow-intent href="market:*" />
        <icon density="ldpi" src="resources\android\icon\drawable-ldpi-icon.png" />
        <icon density="mdpi" src="resources\android\icon\drawable-mdpi-icon.png" />
        <icon density="hdpi" src="resources\android\icon\drawable-hdpi-icon.png" />
        <icon density="xhdpi" src="resources\android\icon\drawable-xhdpi-icon.png" />
        <icon density="xxhdpi" src="resources\android\icon\drawable-xxhdpi-icon.png" />
        <icon density="xxxhdpi" src="resources\android\icon\drawable-xxxhdpi-icon.png" />
        <splash density="land-ldpi" src="resources\android\splash\drawable-land-ldpi-screen.png" />
        <splash density="land-mdpi" src="resources\android\splash\drawable-land-mdpi-screen.png" />
        <splash density="land-hdpi" src="resources\android\splash\drawable-land-hdpi-screen.png" />
        <splash density="land-xhdpi" src="resources\android\splash\drawable-land-xhdpi-screen.png" />
        <splash density="land-xxhdpi" src="resources\android\splash\drawable-land-xxhdpi-screen.png" />
        <splash density="land-xxxhdpi" src="resources\android\splash\drawable-land-xxxhdpi-screen.png" />
        <splash density="port-ldpi" src="resources\android\splash\drawable-port-ldpi-screen.png" />
        <splash density="port-mdpi" src="resources\android\splash\drawable-port-mdpi-screen.png" />
        <splash density="port-hdpi" src="resources\android\splash\drawable-port-hdpi-screen.png" />
        <splash density="port-xhdpi" src="resources\android\splash\drawable-port-xhdpi-screen.png" />
        <splash density="port-xxhdpi" src="resources\android\splash\drawable-port-xxhdpi-screen.png" />
        <splash density="port-xxxhdpi" src="resources\android\splash\drawable-port-xxxhdpi-screen.png" />
    </platform>

authentication code

import { HttpClient, HttpHeaders } from '@angular/common/http';
...
async login(email:string, password:string) {
    let loginObject = {email, password};
    let httpOptions = {
      headers: new HttpHeaders({
        'Content-Type':  'application/json'
      })
    };
    let res:any = await this.http.post("http://192.168.1.3:3001/login", loginObject, httpOptions).toPromise()
    console.log("res,",res);
    if (res.msg == 'auth-success') {
      console.log("res token:", res.token);
      await this.storage.setItem(TOKEN_KEY, res.token);
      this.authenticationState.next(true);
      return 'auth-success';
    }
    else
    {
      this.authenticationState.next(false);
      return 'login-failed';
    }
  }

Image of Error

I have tried multiple "odd" solutions online, none of which have worked. I cannot understand why, when I have cleartext enabled, I still am not allowed to debug over my internal IP.

Additionally, it is worth mentioning that my previous ionic project "randomly" broke with invalid .json. I did not properly commit my changes and ended up in a hole, so I started an entire new project and have been building up my previous configuration. Additionally, I have verified that the server is working over my router. Previously, the posted code solved my problem. But now, it does not. Pulling my hair out!

Thanks in advance.

EDIT: network_security_config.xml

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

Problem still not fixed.

Answer 1

Use:

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <base-config cleartextTrafficPermitted="true">

    </base-config>
</network-security-config>

Or

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

Why?

cleartextTrafficPermitted="true" is false by default in Android 9+

<domain> tags are specific to a particular domain ('localhost' or '192.168.1.3' in your case)

<base-config> tag is for any domain that is not specified in <domain>

The default configuration used by all connections whose destination is not covered by a domain-config.

Detailed Explanation:

Cleartext error happens when you request a server that does not use encryption i.e. doesn't have https support.

Starting with Android 9 (API level 28), cleartext support is disabled by default.

To resolve this error, you need to tell android to enable cleartext support. This is done in network_security_config.xml file.

Read More At: https://developer.android.com/training/articles/security-config#domain

Edit:

The new security policies of Android prevent text that is transmitted on a non-encrypted connection (http). If you test your previous configuration on a device with Android version 8 or less, you will not get this error. After Android 9+(SDK 28), we need to explicitly tell Android that we are using a http connection. So we specify the domain in network_security_config.xml file. <base-config> tag is used to allow clearTextTraffic on all the domains. If you are sure about the domains that your app will use, then you can specify them in <domain> tag and use tag.