Why is the error ERR_CLEARTEXT_NOT_PERMITTED with cleartext for the HTTP traffic persistent?

Question

I'm developing a new app using the Ionic-framework and I'm using the HttpClient module for API requests.

The problem is that I've read and tried to apply the solutions on:

1. https://medium.com/@son.rommer/fix-cleartext-traffic-error-in-android-9-pie-2f4e9e2235e6
2. https://forum.ionicframework.com/t/livereload-err-cleartext-not-permitted/163487
3. Android 8: Cleartext HTTP traffic not permitted
4. Why am I seeing net::ERR_CLEARTEXT_NOT_PERMITTED errors after upgrading to Cordova Android 8?
5. How to fix 'net::ERR_CLEARTEXT_NOT_PERMITTED' in flutter
6. Android Pie: WebView showing error for plain HTTP on some sites, even with usesClearTextTraffic="true"
7. WebView showing ERR_CLEARTEXT_NOT_PERMITTED although site is HTTPS

But my app keeps throwing this error when it does a query to the API.

Here are the details of my files:

at /, the config.xml :

    <?xml version='1.0' encoding='utf-8'?>
<widget id="com.example" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    ...
    <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:networkSecurityConfig="@xml/network_security_config"/>
            <application android:usesCleartextTraffic="true" />
        </edit-config>
        <resource-file src="resources/android/xml/network_security_config.xml" target="app/src/main/res/xml/network_security_config.xml" />
     ...
</widget>

at /resources/android/xml/, the network_security_config.xml :

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

It is not valid to use the securely encrypted protocol HTTPS. The API only admits HTTP.

Solution 1

Update December 2019 ionic - 4.7.1

<manifest xmlns:tools=“http://schemas.android.com/tools”>

<application android:usesCleartextTraffic=“true” tools:targetApi=“28”>

Please add above content in android manifest .xml file

Previous Versions of ionic

1. Make sure you have the following in your config.xml in Ionic Project:

   <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
               <application android:networkSecurityConfig="@xml/network_security_config" />
               <application android:usesCleartextTraffic="true" />
           </edit-config>
   

2. Run ionic Cordova build android. It creates Android folder under Platforms

3. Open Android Studio and open the Android folder present in our project project-platforms-android. Leave it for few minutes so that it builds the gradle

4. After gradle build is finished we get some errors for including minSdVersion in manifest.xml. Now what we do is just remove <uses-sdk android:minSdkVersion="19" /> from manifest.xml.

   Make sure its removed from both the locations:

   1. app → manifests → AndroidManifest.xml.
   2. CordovaLib → manifests → AndroidManifest.xml.

   Now try to build the gradle again and now it builds successfully

5. Make sure you have the following in Application tag in App → manifest → Androidmanifest.xml:

   <application
   android:networkSecurityConfig="@xml/network_security_config"  android:usesCleartextTraffic="true" >
   

6. Open network_security_config (app → res → xml → network_security_config.xml).

   Add the following code:

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

Here xxx.yyyy.com is the link of your HTTP API. Make sure you don't include any Http before the URL.

Note: Now build the app using Android Studio (Build -- Build Bundle's/APK -- Build APK) and now you can use that App and it works fine in Android Pie. If you try to build app using ionic Cordova build android it overrides all these settings so make sure you use Android Studio to build the Project.

If you have any older versions of app installed, Uninstall them and give a try or else you will be left with some error:

App not Installed

Solution 2

1. Make sure you have the following in your config.xml in Ionic Project:

   <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" android:networkSecurityConfig="@xml/network_security_config" /> </edit-config>

2 . at /resources/android/xml/, the network_security_config.xml :

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

note don't add http in domain url

perfectly work for me on ionic 4 http api's calling

Comments

[Pablo Garcia]

Mine worked by setting the network_security_config to <network-security-config> <base-config cleartextTrafficPermitted="true"/> </network-security-config> This is for Ionic 5

[pratik jaiswal]

Can anyone please answer this stackoverflow.com/questions/59116787/…

[Shashwat Gupta]

not found network_security_config at /resources/android/xml/, this location

[Tijl .Reynhout]

@PabloGarcia where did you make these changes? In what file?