Ionic Native HTTP instead of angulars http

Ionic Native
5

I had almost the same problem. We need to implement certificate pinning, but I also want to run the app on browser. So I wrote a wrapper Provider as follows:

providers/http/http.ts

import {Injectable} from '@angular/core';
import {Platform} from 'ionic-angular';

import {HttpAngularProvider} from '../http-angular/http-angular';
import {HttpNativeProvider} from '../http-native/http-native';

@Injectable()
export class HttpProvider {
    public http;

    constructor(private platform: Platform, private angularHttp: HttpAngularProvider, private nativeHttp: HttpNativeProvider) {
        this.http = this.platform.is('ios') || this.platform.is('android') ? nativeHttp : angularHttp;
    }
}

providers/http-angular/http-angular.ts

import {Injectable} from '@angular/core';
import {Http, RequestOptions, ResponseContentType, URLSearchParams} from '@angular/http';

import 'rxjs/add/operator/map';

@Injectable()
export class HttpAngularProvider {
    constructor(public http: Http) {}

    public get(url, params?: any, options: any = {}) {
        let requestOptions = new RequestOptions();
        requestOptions.withCredentials = true;

        requestOptions.params = params ? this.createSearchParams(params) : requestOptions.params;

        return this.http.get(url, requestOptions).map(resp => options.responseType == 'text' ? resp.text() : resp.json());
    }

    public post(url, params: any, options: any = {}) {
        let requestOptions = new RequestOptions();
        requestOptions.withCredentials = true;

        let body = this.createSearchParams(params);

        return this.http.post(url, body, requestOptions).map(resp => options.responseType == 'text' ? resp.text() : resp.json());
    }

    private createSearchParams(params: any) {
        let searchParams = new URLSearchParams();
        for (let k in params) {
            if (params.hasOwnProperty(k)) {
                searchParams.set(k, params[k]);
            }
        }

        return searchParams;
    }
}

providers/http-native/http-native.ts

import {Injectable} from '@angular/core';
import {HTTP} from '@ionic-native/http';

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/fromPromise';
import 'rxjs/add/operator/map';

@Injectable()
export class HttpNativeProvider {
    constructor(public http: HTTP) {}

    public get(url, params?: any, options: any = {}) {
        let responseData = this.http.get(url, params, {})
            .then(resp => options.responseType == 'text' ? resp.data : JSON.parse(resp.data));

        return Observable.fromPromise(responseData);
    }

    public post(url, params?: any, options: any = {}) {
        let responseData = this.http.post(url, params, {})
            .then(resp => options.responseType == 'text' ? resp.data : JSON.parse(resp.data));

        return Observable.fromPromise(responseData);
    }
}

It successfully switches to native http on Android and iOS, and to angular http on browser. However, I have the problem with native http won’t persist the sessions, I guess it doesn’t send the cookies on subsequent calls.

3 Likes