Ionic-native-http-connection-backend NPM

ionic-native-http-connection-backend

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

Motivation

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 @awesome-cordova-plugins/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 @awesome-cordova-plugins/http whenever it is possible (= on device with installed plugin)
If HttpBackend finds it impossible to use @awesome-cordova-plugins/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.

Installation

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

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

Usage

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';

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