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

Angular HTTP is not working properly on real devices. Try to use native HTTP plugin instead https://ionicframework.com/docs/native/http — A. Khaled, Apr 04 '20 at 13:13

score 19 · Answer 1 · edited Feb 18 '23 at 17:21

19

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.

edited Feb 18 '23 at 17:21

double-beep

5,031
17
33
41

answered Apr 12 '20 at 08:59

Yasir

191
1
4

1

refer to this for more info: https://stackoverflow.com/questions/51902629/how-to-allow-all-network-connection-types-http-and-https-in-android-9-pie – Yasir Apr 12 '20 at 09:02
Thank you!!! You saved me many hours of debugging :) – Ismael Apr 03 '22 at 23:58
You saved my lot of hours, thank you – Yougeshwar Khatri Aug 10 '22 at 11:45

score 3 · Answer 2 · answered Jul 16 '19 at 17:16

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>

answered Jul 16 '19 at 17:16

Amith Kumar

4,400
1
21
28

I did that but no change, in browser is ok but in mobile still not working – lady Jul 16 '19 at 19:33
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); – lady Jul 16 '19 at 19:34
any other advice? – lady Jul 16 '19 at 19:34
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. – Carlos Borges Sep 27 '19 at 21:01
Did not help in my case. – Vasanth May 05 '21 at 17:41

score 3 · Accepted Answer · answered Jul 18 '19 at 15:29

3

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.

answered Jul 18 '19 at 15:29

lady

356
1
2
14

@angular/common/http will work in Ionic 4 app , but you have to add one line in AndroidManifest.xml file. – Kevin Jose Apr 28 '20 at 16:12
can you tell deatiled .. how i can fix this issue – FsCode Aug 13 '20 at 19:56
@angular/common/http work on real device. Just add to AndroidManifest.xml – Alexey Zheleznyakov Jun 16 '21 at 18:49
@AlexeyZheleznyakov now i have nativeStorageError code 2 – van9petryk Jul 20 '21 at 13:24
@van9petryk I think nativeStorageError code 2 not linked with @angular/common/http – Alexey Zheleznyakov Jul 21 '21 at 09:17

score 2 · Answer 4 · answered Jan 12 '21 at 18:55

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

score 1 · Answer 5 · answered Aug 08 '20 at 00:18

1

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

answered Aug 08 '20 at 00:18

Alejandro Zapata

11
1

score 0 · Answer 6 · answered Feb 16 '20 at 11:10

0

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

answered Feb 16 '20 at 11:10

Dheeraj

1

NIKHIL CHAUBEY · Answer 7 · 2023-02-15T11:42:51.287

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.

score -1 · Answer 8 · answered Jul 09 '21 at 11:01

-1

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.

answered Jul 09 '21 at 11:01

Ajay

1
1

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

8 Answers8

Linked