8

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

1

8 Answers 8

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.

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

5
  • @angular/common/http will work in Ionic 4 app , but you have to add one line in AndroidManifest.xml file.
    – Kevin Jose
    Apr 28, 2020 at 16:12
  • can you tell deatiled .. how i can fix this issue
    – FsCode
    Aug 13, 2020 at 19:56
  • @angular/common/http work on real device. Just add <application android:usesCleartextTraffic="true" /> to AndroidManifest.xml Jun 16, 2021 at 18:49
  • @AlexeyZheleznyakov now i have nativeStorageError code 2 Jul 20, 2021 at 13:24
  • @van9petryk I think nativeStorageError code 2 not linked with @angular/common/http Jul 21, 2021 at 9:17
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




 
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

0

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

0

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.

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

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.