Capacitor: Error response external api

[aadriann]

Good evening, im developing an app with an external API. In web, ionic dev app and npx cap serve, all works fine, but when i try to package the app with capacitor and deploy in android studio, i have this error with all requests:
Login Error: {"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}}

Does anyone know why?

Regards.

[sean118]

Hey, it could be related to a CORS issue. Maybe this can help (although it talks about iOS) https://github.com/ionic-team/ionic/issues/14410

[jcesarmobile]

You have to provide more information.
How do you call the API?
Does your server have CORS enabled (it's required for both iOS and Android)
Do you use http or https url?
That error is from Android Studio or Chrome web inspector?

[ghost]

I'm having the same problem! It's not a CORS issue because I'm trying to consume my REST APIs located in an EC2 instance at AWS, I enabled CORS in the Spring mappinng, but whenever I try to GET or POST anything I get:

{"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}}

I wasn't having this problem when I was using Ionic 3, but since I had to upgrade to Ionic 4 because of some Angular AoT compiling issue, All my Angular HttpClient requests return that...

My Spring CORS config:

@Override
public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/**")
            .allowedMethods("GET", "POST", "PUT", "DELETE")
            .allowedOrigins("*")
            .allowedHeaders("*");
}

[aadriann]

I have all cors enabled. My API is in laravel, i use the same post method
on Ionic 3 with the same API and It works. This only have with capacitor,
not when i compile the app in Cordova. Seems a capacitor problem...

El sáb., 27 oct. 2018 23:15, ydorea [e-mail] escribió:

I'm having the same problem! It's not a CORS issue because I'm trying to
consume my REST APIs located in an EC2 instance at AWS, I enabled CORS in
the Spring mappinng, but whenever I try to GET or POST anything I get:

{"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}}

I wasn't having this problem when I was using Ionic 3, but since I had to
upgrade to Ionic 4 because of some Angular AoT compiling issue, All my
Angular HttpClient requests return that...

My Spring CORS config:
@Override public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/*") .allowedMethods("GET", "POST", "PUT", "DELETE")
.allowedOrigins("") .allowedHeaders("*"); }

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/ionic-team/capacitor/issues/890#issuecomment-433655801,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ALkkOUjoE7rlmSH9rTxig4JQnuAVvw4Wks5upMzwgaJpZM4XdKPl
.

[ghost]

Got the problem! Chrome by default doesn't allow mixed content (ie fetching HTTP from an HTTPS server), and Capacitor serves the app using HTTPS. There's a configuration in capacitor.config.json that overrides this and allows mixed content fetching, just add this to the file and it's gonna work:

{
    "android": {
        "allowMixedContent": true
    }
}

(well, at least that was MY problem, because my API is served with HTTP. If that's the case for you, this is how you fix it.)

[aadriann]

Works with IOS? Tomorrow i test this. Thanks for your help!!

El dom., 28 oct. 2018 1:41, ydorea [e-mail] escribió:

Got the problem! Chrome by default doesn't allow mixed content (ie
fetching HTTP from an HTTPS server), and Capacitor serves the app using
HTTPS. There's a configuration in capacitor.config.json that overrides this
and allows mixed content fetching, just add this to the file and it's gonna
work:

{
"android": {
"allowMixedContent": true
}
}

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/ionic-team/capacitor/issues/890#issuecomment-433664261,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ALkkOcgN6UeqHf6bbrw9R97vacJ7d12fks5upO9AgaJpZM4XdKPl
.

[sean118]

You could also try setting "Access-Control-Allow-Headers" to a specific value instead of using the wildcard ('*').

The wildcard might cause issues as support for it is not fully implemented, yet (see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers#Compatibility_notes).

So for the Spring config above you could try something like this:

@Override
public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/**")
            .allowedMethods("GET", "POST", "PUT", "DELETE")
            .allowedOrigins("*")
            .allowedHeaders("Content-Type, Authorization, Accept, Origin"); /* ADJUST HEADERS */
}

[ghost]

I'll look into it, thanks! @aadriann, I don't think this works for iOS, as this configuration variable is Android-specific, according to Capacitor's documentation. But there might be something on that line.

[magicfa]

Hi all
it did work in beta.8 but since beta.10 it's not working anymore.
My Api sets the allowedOrigin.
Hope that it will be foxed in the next beta .

[jcesarmobile]

@magicfa are you talking about iOS?
Looks like a different issue to me.
Can you create a new issue and provide more information?

[mlynch]

We need to better document the mixed content issue.

[AhSem]

I added allowMixedContent: true to the capacitor.config.json, and it doesn't help. I got the error

{"headers":
    {
        "normalizedNames":{},
        "lazyUpdate":null,"headers":{}
    },
    "status":0,
    "statusText":"Unknown Error",
    "url":"http://vroom.semnpatrick.com/api/register",
    "ok":false,
    "name":"HttpErrorResponse",
    "message":"Http failure response for http://vroom.semnpatrick.com/api/register: 0 Unknown Error",
    "error":{
        "isTrusted":true
     }
}

Using below:
"@capacitor/android": "^1.1.0",
"@capacitor/core": "1.1.0",

I ran "npx cap sync" after added the allowMixedContent.

Am I missing anything?

[chriswep]

I added allowMixedContent: true to the capacitor.config.json, and it doesn't help. I got the error

same. can't make api request work on android.

[chriswep]

for me it was a problem with a self signed certificate for my local dev server. apparently it's not enough for android to install the cert. patching capacitors Bridge.java to accept my cert solved it for me, see https://stackoverflow.com/a/43594572 - waiting for a better solution though

[jcesarmobile]

What better solution would you expect?

Cordova ignores bad certificates by default while in development, but that leads to people complaining about release apps not working, so I wouldn't like to do the same with Capacitor.

Why don't you just use http in development or use a good certificate even for development?

[chriswep]

Why don't you just use http in development or use a good certificate even for development?

because by default the current android version blocks access to http. however as i now learned this can be disabled via android:usesCleartextTraffic="true", which i did now.

[Raerten]

You can set usesCleartextTraffic="true" only for debug build like this
AndroidManifest.xml

...
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme"
        android:usesCleartextTraffic="${usesCleartextTraffic}
        >
...

build.gradle

...
android {
    compileSdkVersion 28
    defaultConfig {
        applicationId "app.test"
        minSdkVersion 23
        targetSdkVersion 28
        versionCode 1
        versionName "1"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
        manifestPlaceholders = [usesCleartextTraffic:false]
    }
    buildTypes {
        debug {
            applicationIdSuffix ".dev"
            versionNameSuffix "-dev"
            manifestPlaceholders = [usesCleartextTraffic:true]
        }
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}
...

[dwasyluk]

iI can confirm @Raerten answer works where the mixed content solution did not. Thank you! Is there any capacitor-friendly way of setting this flag through capacitor config?

[jcesarmobile]

closing since the comments are off-topic and mixing different issues that are not related to this one

But as summary:

the app scheme can be configured to use https, that prevents mixed content problems
also the app can be configured to allow mixed content in case it's needed
https://capacitor.ionicframework.com/docs/basics/configuring-your-app#common-configuration

the clear text not allowed is a different issue affecting Android 9+, it blocks http calls by default. Capacitor doesn't allow to disable it from Capacitor tooling, but you can disable it as on any Android native project, some options have been explained in some comments already.

A quick google search provide a few more options
https://stackoverflow.com/questions/45940861/android-8-cleartext-http-traffic-not-permitted