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

Polad

Angular HTTP is not working properly on real devices. Try to use native HTTP plugin instead ionicframework.com/docs/native/http – Libation

Answer 1

Finally, I could resolve problem after two days hardwork ! I migrated API calling from '@angular/common/http' to native http '@ionic-native/http/ngx' with this header:

        // create headers data
        const headers = {
          "Content-Type": "application/x-www-form-urlencoded; charset=utf-8", 
          'Accept': 'application/json, text/plain',
          "cache-control": "no-cache", 
          "Access-Control-Allow-Origin": "*", 
          "Access-Control-Allow-Headers": "Origin, Content-Type, X-Auth-Token, Accept, Authorization, X-Request-With, Access-Control-Request-Method, Access-Control-Request-Headers",
          "Access-Control-Allow-Credentials" : "true",
          "Access-Control-Allow-Methods" : "GET, POST, DELETE, PUT, OPTIONS, TRACE, PATCH, CONNECT",  
          };

The cons for me, For now on I have to test on a real device.

Polad

@angular/common/http will work in Ionic 4 app , but you have to add one line in AndroidManifest.xml file. – Yolandoyolane

can you tell deatiled .. how i can fix this issue – Chemical

@angular/common/http work on real device. Just add <application android:usesCleartextTraffic="true" /> to AndroidManifest.xml – Effeminize

@AlexeyZheleznyakov now i have nativeStorageError code 2 – Pirri

@Pirri I think nativeStorageError code 2 not linked with @angular/common/http – Effeminize

Answer 2

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.

Hobard

refer to this for more info: #51903129 – Hobard

Thank you!!! You saved me many hours of debugging :) – Wallflower

You saved my lot of hours, thank you – Southbound

Answer 3

Certain things I would advice you to check:

1) CORS enable at your server side

2) If your APIs is not https, make sure android webview is not blocking the traffic. Enforce enable of cleartextTraffic, which is disabled by default. Add a security config in your app like below. Setup reference here

<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" />
</edit-config>

Demerit

I did that but no change, in browser is ok but in mobile still not working – Polad

in server: // call configure oAuth ConfigureOAuth(app); // create new instance of http configuration HttpConfiguration config = new HttpConfiguration(); // register web api configuration WebApiConfig.Register(config); // allow all cors app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll); // use web api for app app.UseWebApi(config); – Polad

any other advice? – Polad

I did this and did not work AT ALL, in fact, my app which had never had more than 1 failure or ANR, now has a report with 62 failures affecting 11 users. – Andersonandert

Did not help in my case. – Jura

Answer 4

4 Possible Case 

1: Check your Internet connection 
2: Cors must be enabled from Backend
3:   android:usesCleartextTraffic="true" must be added in config.xml and android manifest file in the resource folder

4: Backend IP or domain should be configured in /resources/android/xml/network_security_config.xml




 

Espagnole

Answer 5

I had this problem, I added the cors conditions in my API and changed the WebViewer vension, but the error remained. You can solve it by modifying the ip of the server where my api runs.

/resources/android/xml/network_security_config.xml

Howlond

Answer 6

localhost does not support any android app. If you try to hit API with localhost then, android considers localhost 0.0.0.0:

Gleeson

Answer 7

In my case, the API used SSL but has expired. No more issues after they renew the SSL.

Chloride

Answer 8

Below change is finally work for me changing the API endpoint from http://localhost:7071/data to http://192.168.1.11:7071/data, where 192.168.1.11 is the local IP address of the host.

Ennui

Answer 9

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

My Ionic 6 and capacitor app working fine on Chrome but when I run it on emulator it gave me the "Unknown error" issue.

My backend was AWS.

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>

enter image description here in your manifest file i.e.,

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

If you are using ionic and cordova better to add usecleartraffic in side config.xml if you are using cordova, below is sample taken from a working app.

<platform name="android">
        <preference name="android-targetSdkVersion" value="32" />
        <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application">
            <application android:usesCleartextTraffic="true" />
        </edit-config>

and you are good to go.

Luddite