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 ionicframework.com/docs/native/http — A. Khaled
– A. Khaled, Commented Apr 4, 2020 at 13:13

double-beep · Accepted Answer · 2023-02-18 17:21:41Z

22

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, 2023 at 17:21

double-beep

5,67019 gold badges43 silver badges50 bronze badges

answered Apr 12, 2020 at 8:59

Yasir

2212 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Yasir Over a year ago

refer to this for more info: stackoverflow.com/questions/51902629/…

Ismael Over a year ago

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

Amith Kumar · Accepted Answer · 2019-07-16 17:16:05Z

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, 2019 at 17:16

Amith Kumar

4,9381 gold badge25 silver badges31 bronze badges

5 Comments

lady Over a year ago

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

lady Over a year ago

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 Over a year ago

any other advice?

Carlos Borges Over a year ago

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.

Vasanth Over a year ago

Did not help in my case.

lady · Accepted Answer · 2019-07-18 15:29:05Z

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, 2019 at 15:29

lady

3761 gold badge2 silver badges15 bronze badges

5 Comments

Kevin Jose Over a year ago

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

FsCode Over a year ago

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

Alexey Zheleznyakov Over a year ago

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

van9petryk Over a year ago

@AlexeyZheleznyakov now i have nativeStorageError code 2

Alexey Zheleznyakov Over a year ago

@van9petryk I think nativeStorageError code 2 not linked with @angular/common/http

Shashwat Gupta · Accepted Answer · 2021-01-12 18:55:19Z

2

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

answered Jan 12, 2021 at 18:55

Shashwat Gupta

5,31845 silver badges33 bronze badges

Comments

Alejandro Zapata · Accepted Answer · 2020-08-08 00:18:17Z

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 8, 2020 at 0:18

Alejandro Zapata

111 bronze badge

Comments

Dheeraj · Accepted Answer · 2020-02-16 11:10:42Z

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, 2020 at 11:10

Dheeraj

1

Comments

takde pape · Accepted Answer · 2023-11-23 08:30:59Z

0

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

answered Nov 23, 2023 at 8:30

takde pape

399 bronze badges

Comments

Ajay · Accepted Answer · 2021-07-09 11:01:34Z

-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 9, 2021 at 11:01

Ajay

11 bronze badge

Comments

NIKHIL CHAUBEY · Accepted Answer · 2023-02-15 11:42:51Z

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.

Collectives™ on Stack Overflow

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

9 Answers 9

2 Comments

5 Comments

5 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

2 Comments

5 Comments

5 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related