CODEWITHSUNDEEP
httpionic-frameworkpost
lady
lady

Reputation: 376

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

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

Upvotes: 9

Views: 20224

Answers (9)

takde pape
takde pape

Reputation: 29

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

Upvotes: 0

Yasir
Yasir

Reputation: 221

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.

Upvotes: 22

NIKHIL CHAUBEY
NIKHIL CHAUBEY

Reputation: 11

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.

Upvotes: -1

Ajay
Ajay

Reputation: 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.

Upvotes: -1

Shashwat Gupta
Shashwat Gupta

Reputation: 5264

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

Upvotes: 2

Alejandro Zapata
Alejandro Zapata

Reputation: 11

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

Upvotes: 1

Dheeraj
Dheeraj

Reputation: 1

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

Upvotes: 0

lady
lady

Reputation: 376

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.

Upvotes: 3

Amith Kumar
Amith Kumar

Reputation: 4874

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>

Upvotes: 3

Related Questions