Native Storage + HttpClientModule Combination = ERR_SSL_PROTOCOL_ERROR

Ionic Native
1

Hi,

On my Ionic test app, I try to use http methode in order to use GLPI API REST ( free IT Asset Management), issue tracking and service desk system ) : I implement Native Storage and HttpClientModule.

It’s this the order of actions I need for my fututre app :

  1. Obtain a Session-Token with a Basic Auth GET
  2. I use Native Storage to save my Session-Token
  3. This Token will be used in all API Http methode in the headers

I try this way to obtain a list of all computer on GLPI :

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { NativeStorage } from '@ionic-native/native-storage';
@IonicPage()
@Component({
  selector: 'page-list-tickets',
  templateUrl: 'list-tickets.html',
})

export class ListTicketsPage {

	tickets: Observable<any>;
	protected httpOptions;
	protected token;

	constructor(public navCtrl: NavController, public navParams: NavParams, private httpClient: HttpClient, private nativeStorage: NativeStorage) { 
				this.accessToken();
	}

	accessToken(){
		this.token = this.nativeStorage.getItem('token')
			.then( res => this.openListTicket(res.value) );
	}

	openListTicket(token){
			this.httpOptions = {
			    headers: new HttpHeaders({ 
			    	'Content-Type': 'application/json',  
			    	'Session-Token': '' + token + '',  
			    	'App-Token': 'A STRING',
			    }),
			};
			console.log( this.httpOptions.headers );
			this.tickets = this.httpClient.get('URL/Computer', this.httpOptions);
	}
	
        openDetails(ticket) {
	this.navCtrl.push('TicketDetailsPage', {ticket: ticket});
	}

	openDetailsListConsoleLog(){
		this.tickets.subscribe(data => {console.log('my data: ', data);} );
		this.navCtrl.push('TicketDetailsPage', {tickets: this.tickets})
	}

	ionViewDidLoad() {
		console.log('ionViewDidLoad ListTicketsPage');
	}
}

My goal is to create a list with API like this tuto : How to Make HTTP Calls with Ionic | Ionic Academy | Learn IonicIonic Academy | Learn Ionic

But, the list never appear, except with a console.log().
Often, I found this error log on my emulator inspector :

polyfills.js:3 GET https://support.sh-group.fr/apirest.php/Computer net::ERR_SSL_PROTOCOL_ERROR
s @ polyfills.js:3
t.scheduleTask @ polyfills.js:3
onScheduleTask @ polyfills.js:3
t.scheduleTask @ polyfills.js:3
r.scheduleTask @ polyfills.js:3
r.scheduleMacroTask @ polyfills.js:3
(anonymous) @ polyfills.js:3
o.(anonymous function) @ polyfills.js:2
(anonymous) @ vendor.js:53193
Observable._trySubscribe @ vendor.js:20157
Observable.subscribe @ vendor.js:20145
subscribeToResult @ vendor.js:53816
MergeMapSubscriber._innerSub @ vendor.js:62437
MergeMapSubscriber._tryNext @ vendor.js:62434
MergeMapSubscriber._next @ vendor.js:62417
Subscriber.next @ vendor.js:32465
ScalarObservable._subscribe @ vendor.js:112589
Observable._trySubscribe @ vendor.js:20157
Observable.subscribe @ vendor.js:20145
MergeMapOperator.call @ vendor.js:62392
Observable.subscribe @ vendor.js:20142
FilterOperator.call @ vendor.js:116101
Observable.subscribe @ vendor.js:20142
MapOperator.call @ vendor.js:114355
Observable.subscribe @ vendor.js:20142
ObservableStrategy.createSubscription @ vendor.js:45362
AsyncPipe.subscribe @ vendor.js:45505
AsyncPipe.transform @ vendor.js:45478
(anonymous) @ ListTicketsPage.html:20
debugUpdateDirectives @ vendor.js:14691
checkAndUpdateView @ vendor.js:13860
callViewAction @ vendor.js:14210
execComponentViewsAction @ vendor.js:14142
checkAndUpdateView @ vendor.js:13866
callViewAction @ vendor.js:14210
execEmbeddedViewsAction @ vendor.js:14168
checkAndUpdateView @ vendor.js:13861
callViewAction @ vendor.js:14210
execComponentViewsAction @ vendor.js:14142
checkAndUpdateView @ vendor.js:13866
callViewAction @ vendor.js:14210
execComponentViewsAction @ vendor.js:14142
checkAndUpdateView @ vendor.js:13866
callViewAction @ vendor.js:14210
execEmbeddedViewsAction @ vendor.js:14168
checkAndUpdateView @ vendor.js:13861
callViewAction @ vendor.js:14210
execComponentViewsAction @ vendor.js:14142
checkAndUpdateView @ vendor.js:13866
callViewAction @ vendor.js:14210
execComponentViewsAction @ vendor.js:14142
checkAndUpdateView @ vendor.js:13866
callViewAction @ vendor.js:14210
execEmbeddedViewsAction @ vendor.js:14168
checkAndUpdateView @ vendor.js:13861
callViewAction @ vendor.js:14210
execComponentViewsAction @ vendor.js:14142
checkAndUpdateView @ vendor.js:13866
callWithDebugContext @ vendor.js:15092
debugCheckAndUpdateView @ vendor.js:14629
ViewRef.detectChanges @ vendor.js:11652
(anonymous) @ vendor.js:6136
ApplicationRef.tick @ vendor.js:6136
(anonymous) @ vendor.js:5969
t.invoke @ polyfills.js:3
onInvoke @ vendor.js:4979
t.invoke @ polyfills.js:3
r.run @ polyfills.js:3
NgZone.run @ vendor.js:4796
next @ vendor.js:5969
schedulerFn @ vendor.js:4573
SafeSubscriber.__tryOrUnsub @ vendor.js:32614
SafeSubscriber.next @ vendor.js:32561
Subscriber._next @ vendor.js:32501
Subscriber.next @ vendor.js:32465
Subject.next @ vendor.js:39688
EventEmitter.emit @ vendor.js:4553
checkStable @ vendor.js:4944
onHasTask @ vendor.js:4992
t.hasTask @ polyfills.js:3
t._updateTaskCount @ polyfills.js:3
r._updateTaskCount @ polyfills.js:3
r.runTask @ polyfills.js:3
o @ polyfills.js:3
vendor.js:1703
ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: “Unknown Error”, url: null, ok: false…}

What I miss to fullfill my goal?

Sorry but my level in English. French usual level, I guess ^^’

2

That sounds like something below the level of your app code, so I would first start investigating the server side.

3

In the company I’m working, I’m not in charge of the server side of my application. I go check this information with the co-worker in charge of the server side.
Thanks for the advise.