ionic-native-http-connection-backend
v11.0.1
Published
A solution to CORS problem with Ionic and WKWebView
Downloads
5,707
Readme
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'sHttpClient
- 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 usesXmlHttpRequest
)
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 {
}
Contributing
Contributing guidelines could be found in CONTRIBUTING.md