Ionic-framework: SOLVED - Angular HttpClient IOS failure response - unknown url, unknown error

[marceloimg93]

Ionic version: (check one with "x")
(For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x] 3.x
[ ] 4.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request

Current behavior:

When I sent a HTTPS post request from xcode Version 9.3 IOS Emulator, I got this message as response:

{"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}} 2018-05-02 10:50:54.811397-0300 Webeav[6895:83093] CDVWKWebViewEngine: handleStopScroll

This might be a CORS issue. I found other related issues on Google solved by configuring proxy or allowing origin on server side but that is not my case. It is only happening on IOS devices/simulator. Android and Browser are working perfectly.

I am using HttpClient from angular/common/http;

I set up my NGINX to allow CORS:

add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE'; add_header 'Access-Control-Allow-Headers' 'Accept,Accept-Language,Content-Language,Content-Type'; add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
Expected behavior:

I would get my api data.

Steps to reproduce:

Related code:

import { HttpClient } from '@angular/common/http';

validarLogin(login: string, password: string) {

        return this.http.post(this.apiUrl, {}, {
            params: {
                <my_api_params>
            }
});

Then I subscribed to it and process the response:

this.authService.validarLogin(email, senha).subscribe(
      (data) => {
        console.log(data) 
      },
     (error) => {
        console.log(error)
     }
);

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:

    cordova (Cordova CLI) : 8.0.0 

local packages:

    @ionic/app-scripts : 3.1.8
    Cordova Platforms  : android 7.0.0 browser 5.0.3 ios 4.5.4
    Ionic Framework    : ionic-angular 3.9.2

System:

    ios-deploy : 1.9.2 
    Node       : v8.9.4
    npm        : 5.6.0 
    OS         : macOS High Sierra
    Xcode      : Xcode 9.3 Build version 9E145 

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro

[marceloimg93]

I figured out that it was a issue related to WKWebView and CORS as it is mentioned at ionic WKWebView documentation

However, even though I had allow CORS on NGINX, my app still didn't work on IOS.

I solved this issue by Downgrading to UIWebView;

I don't know if this can be considered a bug but I believe that this is an opportunity for future improvement.

[peterpeterparker]

@marceloimg93 I just landed on your issue because I'm facing the same problem but only with iOS >= v12

anyway wanted to make you aware, it would need to be confirmed, but I read today that UIWebView will be deprecated with iOS v12

[CraftLogan]

Same issue here. Is there any other option than downgrading to to UIWebView? Thanks Logan

[osoluche]

Into your config.xml put this => <preference name="CordovaWebViewEngine" value="CDVUIWebViewEngine" />

[indhio]

Works! Thanks!

[BboyEcuachi]

@osoluche it worked! ty

[lilian131]

this work for me ionic 3 :
1

rm -rf platforms/
rm -rf plugins/

in your config.xml
2

<feature name="CDVWKWebViewEngine">
  <param name="ios-package" value="CDVWKWebViewEngine" />
</feature>
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />

then do build
3

ionic cordova build ios
ionic cordova build android

[heooon]

thanks

[BajajSaajan]

where should i add these plan ?

[lilian131]

Just after

<\platform>

[BajajSaajan]

which version of angular are you using in ionic ?

[ShadyBoukhary]

Did someone get it running on iOS 12? If so, can you please tell me how?

EDIT: Resolved by allowing CORS in the API.

[developerjohan01]

I got this error on iOS only and only on one of our calls where we were using a PUT.
Got the error in both the simulator (11.3 and 12.0) and on real device.

Tried to downgrade the web-view which didn't work for me since the rest of the app is relying on using the WKWebView web-view. Perhaps the call is working but now I can't login since other components don't work using UIWebView...

EDIT:
I previously wrote that _all looks good_, but after re-visiting this I realised that we _did_ use some wildcards ('*') in the headers.
Being specific as suggested by others in this thread fixes the issue and works on all platforms.

Also checked the CORS settings and _all looks good_ and is working on Android, Browser and iOS except the PUT on iOS.
We are in control of the API we are calling so _we changed the endpoint to use a_ POST and all is working.

Error using PUT on iOS:

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

$ ionic info
✔ Gathering environment info - done!

Ionic:

   ionic (Ionic CLI)  : 4.1.2
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.1.11

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.0.0, browser 5.0.4, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic 5.2.5, cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.0, (and 10 other plugins)

System:

   ios-deploy : 2.0.0
   NodeJS     : v10.9.0 (/Users/user/.nvm/versions/node/v10.9.0/bin/node)
   npm        : 6.2.0
   OS         : macOS High Sierra
   Xcode      : Xcode 10.0 Build version 10A255

[sean118]

I faced this issue when sending http requests containing headers that were not explicitly allowed by Access-Control-Allow-Headers. A wildcard (‘*’) is not supported here.

I was using an “Authorization” Header, which might also be the missing part in the openers Nginx config.

[FullChargeComplete]

native-http can work

[abhairaj]

I had the same problem with an app accessing an api on AWS Lambda when running as an android app. Turned out the problem was that my api wasn't including proper access control headers in the simple request (GET) response. Once I added them, things ran fine.

[developerjohan01]

Looked at this again and made sure that we are being specific with no wildcards ('*') in the headers, as suggested by @sean118 and @abhairaj

_For example_
Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE
and
Access-Control-Allow-Headers: Content-Type,X-Amz-Date,Authorization,X-Api-Key,Origin,Accept,Access-Control-Allow-Headers,Access-Control-Allow-Methods,Access-Control-Allow-Origin

And now all is working fine.

[shaolinjr]

Hey guys! I solved it with an unbelievable stupid way! Look at my code:
`let auth = await this.auth.getAuthentication();
auth = auth.replace(/[\r\n]+/, '');

let header: HttpHeaders = new HttpHeaders();

header = header.set('Authorization', ('Token ' + auth));

header = header.append("Content-Type", "application/json");

return this.http.get(API_URL + '/surveys/' + surveyId + '/', { headers: header }).timeout(MAX_TIMEOUT).toPromise();`

For iOS devices, the url has to end with an '/' (slash) character.

[bitkorn]

with CORS in API and <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" /> in config.xml it works at me :)

[MaBbKhawaja]

Same issue here. Is there any other option than downgrading to to UIWebView? Thanks Logan

yes i am facing this same issue now my ui is not working

[BajajSaajan]

for iOS, we have to disable WKWebView before run it to the device by type
this command . ionic cordova plugin rm cordova-plugin-ionic-webview
Otherwise, this error will happen when running this app to the device.
{"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}} 2018-05-02 20:45:51.503 Base64
Upload[59179:6264130] CDVWKWebViewEngine: handleStopScroll

Kind Regards

Saajan Bajaj | Software Engineer

M: [phone]

https://in.linkedin.com/in/saajanbajaj0003

On Tue, Nov 27, 2018 at 12:20 PM MaBbKhawaja [e-mail]
wrote:

Same issue here. Is there any other option than downgrading to to
UIWebView? Thanks Logan

yes i am facing this same issue now my ui is not working

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/ionic-team/ionic/issues/14410#issuecomment-441947536,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ASkKEy8b8SIZSd5kP8DJERwZEoDLBv2Sks5uzOCYgaJpZM4Tu0Vh
.

[MaBbKhawaja]

for iOS, we have to disable WKWebView before run it to the device by type this command . ionic cordova plugin rm cordova-plugin-ionic-webview Otherwise, this error will happen when running this app to the device. {"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}} 2018-05-02 20:45:51.503 Base64 Upload[59179:6264130] CDVWKWebViewEngine: handleStopScroll Kind Regards Saajan Bajaj | Software Engineer M: [phone] https://in.linkedin.com/in/saajanbajaj0003
…
On Tue, Nov 27, 2018 at 12:20 PM MaBbKhawaja @.*> wrote: Same issue here. Is there any other option than downgrading to to UIWebView? Thanks Logan yes i am facing this same issue now my ui is not working — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#14410 (comment)>, or mute the thread https://github.com/notifications/unsubscribe-auth/ASkKEy8b8SIZSd5kP8DJERwZEoDLBv2Sks5uzOCYgaJpZM4Tu0Vh .

now my ui is not workin when i click on input field it just blink cursor and nothing works

[BajajSaajan]

Could you please share the screenshot ?

On Tue, Nov 27, 2018, 4:22 PM MaBbKhawaja <[email protected] wrote:

for iOS, we have to disable WKWebView before run it to the device by type
this command . ionic cordova plugin rm cordova-plugin-ionic-webview
Otherwise, this error will happen when running this app to the device.
{"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}} 2018-05-02 20:45:51.503 Base64
Upload[59179:6264130] CDVWKWebViewEngine: handleStopScroll Kind Regards
Saajan Bajaj | Software Engineer M: [phone]
https://in.linkedin.com/in/saajanbajaj0003
… <#m_5728806557580735762_>
On Tue, Nov 27, 2018 at 12:20 PM MaBbKhawaja @.*> wrote: Same
issue here. Is there any other option than downgrading to to UIWebView?
Thanks Logan yes i am facing this same issue now my ui is not working — You
are receiving this because you commented. Reply to this email directly,
view it on GitHub <#14410 (comment)
https://github.com/ionic-team/ionic/issues/14410#issuecomment-441947536>,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ASkKEy8b8SIZSd5kP8DJERwZEoDLBv2Sks5uzOCYgaJpZM4Tu0Vh
.

now my ui is not workin when i click on input field it just blink cursor
and nothing works

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/ionic-team/ionic/issues/14410#issuecomment-442014586,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ASkKEwwQV-Q6On6VySaz0pmR7WNFGlhnks5uzRlggaJpZM4Tu0Vh
.

[kensodemann]

@MaBbKhawaja - if you disabled WKWebView as described by @BajajSaajan, then you essentially dropped down to using UIWebView, which is known to have several bugs, is deprecated, and will likely be removed entirely by Apple at some point.

WKWebView enforces CORS, so you need to make sure the server supplying your data handles it properly as described here: https://ionicframework.com/docs/wkwebview/#cors

Based on your description, it is likely that it is not.

[paulstelzer]

I think this issue can closed or does anyone see a bug here that is related to Ionic?

[ShadyBoukhary]

@paulstelzer you can go ahead and close this issue. It is not related to ionic.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.