Develop Reference

http request fails in ionic android 8+

my ionic 4 HTTP request is not working fine in android 9, but in android < 9 it working perfectly. after debug the app it shows fail status in the network tab. I have added.
<edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application">
<application android:networkSecurityConfig="#xml/network_security_config" />
<application android:usesCleartextTraffic="true" />
</edit-config>
and
<widget id="io.ionic.starter" version="1.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:cdv="http://cordova.apache.org/ns/1.0">
in config.xml file and change the android:targetSdkVersion
<uses-sdk android:minSdkVersion="19" android:targetSdkVersion="29" />
in AndroidManifest.xml file. but these are also not useable .please help me out in this.

I have faced this problem also, but I have a solution that is working in my case. Follow these 4 steps below.
step 1: create a directory named xml in "resources/android/" and create a new file named
network_security_config.xml.
step 2: add this following code in this network_security_config file
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
<base-config cleartextTrafficPermitted="true">
<trust-anchors>
<certificates src="system" />
</trust-anchors>
</base-config>
</network-security-config>
step 3: add this code following code in config.xml file under android platform like below
<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" />
<allow-intent href="market:*" />
step 4: don't use targetSdkVersion=29, it will work in 28, use below target version.
<uses-sdk android:minSdkVersion="19" android:targetSdkVersion="28" />

--------------- http:// and https:// ---------------
In Android 9, 10, and above versions, they only accept 'HTTPS' requests. If we are debugging our debug build in an Android device(in chrome inspect) having android versions of 5,6,7,8 or lower versions than 5, then we don't feel any issue, and also in lower versions of android accept 'HTTP' requests. This is because the android team had improved its security and not accepting HTTP requests, because as we know that HTTP is a non-secure request.
This was a major problem on which I gets stuck when I was a beginner. And this might be a common mistake (a careless mistake).
For solving this issue then just add an 's' in http:// requests to make it like https:// request
For example -- (if your API link is just like the first one shown below then change your link just like the second one)
1.http://web.global.com/Campus/api/login
2.https://web.global.com/Campus/api/login
I hope this solution will help u in solving the problem and have a great day buddy...

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

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:
https://medium.com/#son.rommer/fix-cleartext-traffic-error-in-android-9-pie-2f4e9e2235e6
https://forum.ionicframework.com/t/livereload-err-cleartext-not-permitted/163487
Android 8: Cleartext HTTP traffic not permitted
Why am I seeing net::ERR_CLEARTEXT_NOT_PERMITTED errors after upgrading to Cordova Android 8?
How to fix 'net::ERR_CLEARTEXT_NOT_PERMITTED' in flutter
Android Pie: WebView showing error for plain HTTP on some sites, even with usesClearTextTraffic="true"
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.

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
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>
Run ionic Cordova build android. It creates Android folder under Platforms
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
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:
app → manifests → AndroidManifest.xml.
CordovaLib → manifests → AndroidManifest.xml.
Now try to build the gradle again and now it builds successfully
Make sure you have the following in Application tag in App → manifest → Androidmanifest.xml:
<application
android:networkSecurityConfig="#xml/network_security_config" android:usesCleartextTraffic="true" >
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

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

Ionic - HTTP POST request not working on native Android but working on Ionic Devapp

I'm trying to make a post request using the ionic native HTTP module in my ionic app. When I run the app using Ionic DevApp, the request works and the app works fine. When I use ionic cordova run android --device to build and run the app natively on my device, the http request is failing.
I've been trying a bunch of options listed in other stack overflow questions. I've installed cordova-plugin-whitelist and modified my config.xml to include all different types of access orgin and allow navigations. I also made sure my Android Manifest has:
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
I'm at a loss for what else I can try and I figured this is not a CORS issue with the API since the request is working perfectly when I use ionic serve -c to run it through the Ionic DevApp.
Just for reference, my API request looks like:
var headers = {}
this.http.setDataSerializer('json')
return this.http.post(API_URL, send_data, {headers: headers})
.then(data => {
...
}
In my config.xml file I've included:
<access origin="*" />
<access origin="*" subdomains="true" />
<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />
<allow-navigation href="localhost:8080" />
<allow-navigation href="data:*" />
<allow-intent href="http://*/*" />
<allow-intent href="localhost:8080" />
Any guidance would be greatly appreciated, this has been a huge time drain and the frustrating thing is the app is fully functional and succesfully making the http post request from the Ionic DevApp. Thanks.

Have you tried connecting the chrome debugger to see why your post request fails?
You can do this by going to chrome://inspect
You should be able to see your app there (assuming your phone is connected and in dev mode).
Once you see your app, click inspect. This should open a chrome debugger window allowing you to see the network traffic.
Please reply with the result.

Try replacing resource/android/xml/network_security_config.xml
With,
<?xml version="1.0" encoding="utf-8" ?>
<network-security-config>
<base-config cleartextTrafficPermitted="true">
<trust-anchors>
<certificates src="system" />
</trust-anchors>
</base-config>
<domain-config cleartextTrafficPermitted="true">
<domain>api.mydomain.in</domain>
</domain-config>
</network-security-config>

How Cordova support Network Security Config introduced by Android 7.0?

Android 7.0 intorduced Network Security Config to support use custom CAs, but how Cordova support that? I can not find any hint from docs of Cordova.

You can achieve this by adding the edit-config tag to the Android platform in your config.xml, this is supported by Cordova Android Plugin v7.0.
You will need to create the Network Security Config file that you would create for a native Android application using the examples from Google.
Next in the Cordova config.xml you can use the edit-config tag to add the networkSecurityConfig attribute to the Application tag. Then you just need to copy the Network Security Config file as a resource for your application to the res/xml directory.
Here is an example of how this might look in your applications config.xml
...
<platform name="android">
<edit-config xmlns:android="http://schemas.android.com/apk/res/android" file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application">
<application android:networkSecurityConfig="#xml/network_security_config" />
</edit-config>
<resource-file src="network_security_config.xml" target="app/src/main/res/xml/network_security_config.xml" />
</platform>
...

What James answered works but if you have an application where you can't specify a domain or wants to allow clear text traffic for all domains, we need to set android:usesCleartextTraffic="true" in platforms/android/app/src/main/AndroidManifest.xml in <application> tag.
Because, in Android P (version 9, API level 28), cleartext support is by default disabled. To achieve this, just add the following in your config.xml inside <platform name="android">:
<edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application">
<application android:usesCleartextTraffic="true" />
</edit-config>

I am using Cordova 11 with android sdk 30. Just using the
<application android:usesCleartextTraffic="true" /> didn't
work for me. XHR Requests to non https urls just reported 'Error'.
I got it working with the following:
In config.xml I added:
<platform name="android">
<edit-config xmlns:android="http://schemas.android.com/apk/res/android" file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application">
<application android:networkSecurityConfig="#xml/network_security_config" />
</edit-config>
<resource-file src="res/xml/network_security_config.xml" target="app/src/main/res/xml/network_security_config.xml" />
</platform>
Contents of res/xml/network_security_config.xml :
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
<domain-config cleartextTrafficPermitted="true">
<domain>10.1.36.67</domain>
</domain-config>
</network-security-config>
Note the use of the local res/xml folder for the network_security_config.xml file. Placing it in the main platform/app directory won't work and will result in the file being overwritten anyway.

Debug Ionic application with android:debuggable="false"

A have installed my Ionic application on real device. The app is released, signed and has android:debuggable="false".
I faced some problems on that specific device and I need to debug it (not to create and install new --debug build).
Is there some way to debug it? To "attach" it somehow to a keystore to be authorised, or something else...? Any ideas?

I am still trying to find a better way, but so far I am able to debug my Ionic app (a signed --release build) running on a real device via the Chrome (desktop) console, by specifying:
<application android:debuggable="true">
directly in the AndroidManifest.xml file. The attribute in not overwritten when I build the project with the Ionic CLI.
What I would prefer is to set the attribute from the config.xml file, so I don't have to add it again manually in AndroidManifest.xml when I remove/add the platform.

You can add this in your config.xml to solve it.
<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:debuggable="true" />
</edit-config>
Then, you can debug in Chrome.

I've just faced a similar issue (I wanted to create a debuggable Cordova app with cordova build android --release) and I've also wanted to add something to the Cordova config.xml instead of directly editing AndroidManifest.xml, which is generally a bad idea.
The following piece of code worked for me on Cordova 8.1.2, Cordova Android platform version 7.1.4. Just put this inside your config.xml file (somewhere inside the widget tag) and you should be good to go:
<config-file mode="merge" parent="/manifest" platform="android" xmlns:android="http://schemas.android.com/apk/res/android">
<application android:debuggable="true" />
</config-file>
This will also cause the :app:lintVitalRelease linter to give you a [HardcodedDebugMode] error (and for good reason), but the APK will build fine regardless.