HttpErrorResponse and cross origin issue

Hi friends,
I deployed my ionic app on my iphone but I receive this error when I invoke the REST API:

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

During development into browser, I used CORS in order to disable cross origin control.

In my config.xml file I have:

    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <allow-navigation href="*" />

My example code:

this.reqOpts = {
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'Access-Control-Allow-Origin': '*'
      },
      params: new HttpParams()
    };
login(username, password) {
    var url = ...;
    return new Promise(resolve => {
      this.http.get(url, this.reqOpts).subscribe(
        data => { 
              resolve(data); 
        }, 
        err => {
               ...
        }
      );
    });
  }

Help me please

Luca

Hey Luca,

If you’re using WkWebView the backend server needs to allow connections from http://localhost:8080. e.g. for IIS…

<add name="Access-Control-Allow-Origin" value="localhost:8080" />
https://enable-cors.org/server_iis7.html

If you cannot change the backend to enable this you’ll need to use something like…

1 Like

Thanks @Judgewest2000, Can I disable WkWebView?

You can but you would have a UI performance hit. Not recommended - the regular UI Web View with iOS is more based on iOS6’s Safari and will at some point I’m sure be depreciated by Apple.

However if you want to try it…

ionic cordova plugin remove cordova cordova-plugin-ionic-webview --save

The full blurb can be found here…

I followed your advice. I integrated ionic-native/http and modified my code but I can’t test with ionic serve. I receive this error:

Native: tried calling HTTP.get, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator

For testing I need to use
ionic cordova run browser

Can you confirm?

Thanks

It’s a NATIVE plugin.

It won’t work on the browser. I’m assuming being an Ionic application you’re gonna run on actual mobile phones…?

1 Like

My Server Backend returns these headers:

access-control-allow-headers →Content-Type
access-control-allow-methods →GET, POST, PUT
access-control-allow-origin →*

but I have the same problem. Why?

I solved on ios using import { HTTP } from '@ionic-native/http'; but now I have problem on Android.

I receive SSL handshake failed

What is the best solution for both platform?

Thanks