ionic Angular wkwebview TypeScript
Need help with ionic-native-http-connection-backend?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.
sneas

Description

A solution to CORS issues with Ionic and iOS

135 Stars 40 Forks MIT License 213 Commits 3 Opened issues

Services available

Need anything else?

ionic-native-http-connection-backend

version MIT License

This library adds

@ionic-native/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

@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.

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

Troubleshooting

TROUBLESHOOTING.md

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.