ionic-native-http-connection-backend - GitLite

KO | EN

gitlite — search

#python #hacktoberfest #react #typescript #llm #golang #nodejs #windows #awesome #awesome-list #vue #pytorch #mcp #ios

ionic-native-http-connection-backend

(★ 161)

A solution to CORS issues with Ionic and iOS

파일 탐색기

최종 버전 다운로드 (.zip)

- config.yml
- ISSUE_TEMPLATE.md
- - body-to-utf8.ts
  - check-external-request.spec.ts
  - check-external-request.ts
  - collection-to-object.spec.ts
  - collection-to-object.ts
  - create-headers.spec.ts
  - create-headers.ts
  - detect-serializer-and-data.spec.ts
  - detect-serializer-and-data.ts
  - http-params-to-form-data.spec.ts
  - http-params-to-form-data.ts
  - http-params.spec.ts
  - http-params.ts
  - is-composite-http-params.spec.ts
  - is-composite-http-params.ts
  - request-options.ts
  - response-type.spec.ts
  - response-type.ts
  - types.ts
- http-error.ts
- http.mock.ts
- index.ts
- native-http-backend.spec.ts
- native-http-backend.ts
- native-http-fallback.spec.ts
- native-http-fallback.ts
- native-http-module.ts
.gitignore
.npmignore
.prettierrc
commitlint.config.js
CONTRIBUTING.md
jest.init.ts
LICENSE
package-lock.json
package.json
README.md
TROUBLESHOOTING.md
tsconfig.json
tsconfig.test.json

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# ionic-native-http-connection-backend

[![version](https://img.shields.io/npm/v/ionic-native-http-connection-backend.svg?style=flat-square)](http://npm.im/ionic-native-http-connection-backend)
[![MIT License](https://img.shields.io/npm/l/component-library.svg?style=flat-square)](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)