A solution to CORS problem of Ionic and WKWebView
Clone or download
sneas Merge pull request #55 from janpio/patch-1
Update README to explain better what this library does
Latest commit d47ba94 Aug 9, 2018



travis build version MIT License

This library adds @ionic-native/http (when available) as a connection backend to Angular's Http and HttpClient


Now that Apple promotes/requires the use of WKWebView instead of the deprecated UIWebView, Ionic has switched newly created apps over via their cordova-plugin-ionic-webview (and Cordova offers it via their cordova-plugin-wkwebview-engine). That causes requests that used to work just fine to fail with CORS errors.

The real solution of course is to fix the CORS issues server side - but this may not be possible with e.g. 3rd party APIs.

Even though there is a way to solve CORS issues without changing server's response header by using @ionic-native/http, this only works on device and doesn't provide all the power of Angular's Http and HttpClient.

How it works

  • The library provides a HttpBackend interface for Angular's HttpClient
  • This HttpBackend interface tries to use @ionic-native/http whenever it is possible (= on device with installed plugin)
  • If HttpBackend finds it impossible to use @ionic-native/http, it falls back to standard Angular code (HttpXhrBackend, which uses XmlHttpRequest)

This strategy allows developers to use Angular's HttpClient transparently in both environments: Browser and Device.


npm install --save ionic-native-http-connection-backend

Then follow instructions at https://ionicframework.com/docs/native/http/#installation


Add NativeHttpModule, NativeHttpBackend and NativeHttpFallback into the application's module

import { NgModule } from '@angular/core';
import { HttpBackend, HttpXhrBackend } from '@angular/common/http';
import { NativeHttpModule, NativeHttpBackend, NativeHttpFallback } from 'ionic-native-http-connection-backend';
import { Platform } from 'ionic-angular';

    declarations: [],
    imports: [
    bootstrap: [],
    entryComponents: [],
    providers: [
        {provide: HttpBackend, useClass: NativeHttpFallback, deps: [Platform, NativeHttpBackend, HttpXhrBackend]},
export class AppModule {

Angular <4.3



Contributing guidelines could be found in CONTRIBUTING.md