Localhost:8100 could not be loaded because net::ERR_CLEARTEXT_NOT_PERMITTED

Capacitor
1

So… I am looking to run my Ionic 5 (Angular, Capacitor) app on Android Emulator.

Hence, I do:

ionic build

ionic cap run android

Once in Android Studio, I choose a virtual device and click the Play button.

As the app loads, a toast appears with:

“Using app server http://localhost:8100”.

And then once it has “loaded”, all that happens is an error:

“Webpage not available… The webpage http://localhost:8100/ could not be loaded because: net::ERR_CLEARTEXT_NOT_PERMITTED”

image
image769×1634 91.3 KB

To be honest, I have no idea what the error message means, nor do I know for sure if I am following the right steps to run the app, but I would appreciate any help on this before I put my head through the incredibly thin walls of my uni flat.

Thanks

1 Like
2
3

Thanks Aaron, I have managed to get this working by manually adding the android:usesCleartextTraffic=“true” attribute into the AndroidManifest when it is opened in Android Studio… The manifest didn’t seem to update when I made the changes in the config.xml file… Is there something I need to be doing before I re-run the app in Android emulator with “ionic cap run android”. Cheers!

4

I had the same exact error, but not when doing “ionic capacitor run android” but when doing “ionic capacitor run android -l” For the live updates.
I will give this fixes a try also. Thanks :wink:

5

Inside what tag you add this?

6

Where is that config.xml you mention? Can’t seem to find it on my project.

7

In my AndroidManifest.xml:

<application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:usesCleartextTraffic="true" android:theme="@style/AppTheme">

1 Like
8

Thanks. I guess I must be missing something else. Tried adding that but still wont work. Maybe I also need to add what as mentioned to the config.xml but I don’t have that file in my project.

9

your_projetc_ionic/config.xml

10

I believe Capacitor projects don’t have a config.xml file only Cordova has. I’m running Ionic 5 with React and Capacitor and I have no config.xml file anywhere.

Getting back to the original error, I had the same issue and this post worked for me, it describes changes you need to make to the android manifest file, hope it works for you too

11

just run this command :

ionic cordova run android -l --ssl

12

Readme docs carefully and execute script.

13

just try
npm i -g native-run
then
ionic capacitor run android -lc --host=0.0.0.0 -native-run
for live-reload

it worked for me

2 Likes
14

This worked for me too

15

You can just add “0.0.0.0” in the /resources/android/xml/network_security_config.xml like bellow. Then it should works well.

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