https://github.com/sneas/ionic-native-http-connection-backend
A solution to CORS issues with Ionic and iOS
https://github.com/sneas/ionic-native-http-connection-backend
angular ionic wkwebview
Last synced: 12 months ago
JSON representation
A solution to CORS issues with Ionic and iOS
- Host: GitHub
- URL: https://github.com/sneas/ionic-native-http-connection-backend
- Owner: sneas
- License: mit
- Created: 2017-07-21T16:08:27.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-09T11:46:40.000Z (about 3 years ago)
- Last Synced: 2025-03-29T08:06:46.918Z (12 months ago)
- Topics: angular, ionic, wkwebview
- Language: TypeScript
- Homepage:
- Size: 2.86 MB
- Stars: 160
- Watchers: 10
- Forks: 48
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# ionic-native-http-connection-backend
[](http://npm.im/ionic-native-http-connection-backend)
[](http://opensource.org/licenses/MIT)
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`](https://github.com/ionic-team/cordova-plugin-ionic-webview)
(and Cordova offers it via their [`cordova-plugin-wkwebview-engine`](https://github.com/apache/cordova-plugin-wkwebview-engine)). That causes requests that used to work just fine to fail with [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/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`](https://ionicframework.com/docs/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 `@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
```bash
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
```typescript
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](CONTRIBUTING.md)
## Troubleshooting
[TROUBLESHOOTING.md](TROUBLESHOOTING.md)