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

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

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 27 (3 by maintainers)

Most upvoted comments

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.

+12

marceloimg93 on May 3, 2018

@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

peterpeterparker on Jun 5, 2018

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

osoluche on Jul 18, 2018

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.

developerjohan01 on Oct 27, 2018