Ionic 4 Http failure response for (unknown url): 0 Unknown Error. when calling api on real device

Question

I have an ionic 4 application which calls a .NET Core backend api. It works correctly on chrome browser, but when I run apk on android device, the response is:

{"headers":{"normalizedNames":{},"lazyUpdate":null,"headers":{}},"status":0,"statusText":"Unknown Error","url":null,"ok":false,"name":"HttpErrorResponse","message":"Http failure response for (unknown url): 0 Unknown Error","error":{"isTrusted":true}}

regarding to header I appended these options:

const httpOptions = {
    headers: new HttpHeaders({
        "Content-Type": "application/x-www-form-urlencoded; charset=utf-8" , 
        "Access-Control-Allow-Origin": "*", 
        "Access-Control-Allow-Headers": "Origin, Content-Type, X-Auth-Token, Accept, Authorization, X-Request-With",
        "Access-Control-Allow-Credentials" : "true",
        "Access-Control-Allow-Methods" : "GET, POST, DELETE, PUT, OPTIONS, TRACE, PATCH, CONNECT"  
       }) 
};  

I have already installed plugin: cordova-plugin-ionic-webview

and using HttpClient from "@angular/common/http"

My API hosted remotely, no ssl certificate used !

I googled all solutions, but none of them solve my problem

Answer 1

I faced the same issue, the following were my conditions:

• My Ionic 4 app working fine on Chrome but when I run it on emulator it gave me the "Unknown error" issue.
• My backend was Laravel 6.
• I am on a Mac using Android Studio and Visual Studio code.
• I was trying to call an API on the server.

I tried many way to resolve the issue. I was sure it is not a CORs issue since I have taken care of it.

So how can you fix something like that. You have to just add one line, i.e.

android:usesCleartextTraffic="true"

in this tag:

<application android:usesCleartextTraffic="true">
</application>

in your manifest file i.e.,

[yourProject]/android/app/src/main/AndroidManifest.xml

and you are good to go.