CODEWITHSUNDEEP
angularhttpionic-framework
zankle95
zankle95

Reputation: 31

Ionic Angular HTTP isTrusted:true issue

it's been days of me trying to get this to work, I have made many searches on this issue here and on google in general, but nothing has worked so far.

I am developing a basic app In Ionic Angular (latest version) as I am trying to move away from Ionic 1 and AngularJS and need to familiarise myself with the new framework.

I wanna do simple GET requests to my own APIs with Angular's HTTP and not Ionic Native HTTP (which doesn't seem to work in the browser and I like Angular's version more).

For now I have been developing and testing on iOS only, and 90% of the time i try to do a request I get the following error on the iOS simulator and real devices too:

{"headers":{"normalizedNames":{},"lazyUpdate":null,"headers":{}},"status":0,"statusText":"Unknown Error","url":"https://api.myserver.com/endpoint1/","ok":false,"name":"HttpErrorResponse","message":"Http failure response for https://api.myserver.com/endpoint1/: 0 Unknown Error","error":{"isTrusted":true}}

I control the APIs, so I already have set in place the proper CORS headers (have been using them for a long time even in Ionic 1), sure enough if i keep retrying the call over and over again it will eventually go through and I get my JSON response from my server, so this make me think it's something on the Ionic/Angular side not the APIs.

Since this is a test app I am currently using no real authentication besides a GET parameter token. Below is my code.

api.service.ts:

import { Injectable } from '@angular/core';
import { HttpClient , HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  baseUrl = 'https://api.myserver.com/';
  token = 'mytoken';

  constructor(private http: HttpClient) { }

  myGETCall(): Observable<any> {
    const httpOptions = {
      headers: new HttpHeaders({
        "Content-Type": "application/json"
      }),
      params: {token: this.token}
    };
    return this.http.get(`${this.baseUrl}endpoint1/`, httpOptions);
  }
}

servers.page.ts:

import { ApiService } from './../../../services/api.service';
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-servers',
  templateUrl: './servers.page.html',
  styleUrls: ['./servers.page.scss'],
})
export class ServersPage implements OnInit {
  payload;
  loading;

  constructor(private apiService: ApiService) { }

  ngOnInit() { }

  ionViewWillEnter() {
    this.loading = true;
    // allow skeleton html (ion-skeleton-text) to show for a bit before actually calling and displaying data
    setTimeout(() => {
      this.apiService.listServers().subscribe(
        response=>{
          this.payload = response.data;
          this.loading = false;
        },
        error => { console.log(error) }) // logs isTrusted:true
    }, 1000);
  }
}

config.xml:

<access origin="*" />
<allow-navigation href="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<feature name="CDVWKWebViewEngine">
    <param name="ios-package" value="CDVWKWebViewEngine" />
</feature>
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />

index.html:

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

Does anyone have any input on what could be causing this issue? Works fine within the browser.

Thanks a lot

Upvotes: 2

Views: 2637

Answers (1)

zankle95
zankle95

Reputation: 31

FINALLY FINALLY I FOUND WHAT WAS CAUSING THE ISSUE!

My API server is on an Amazon AWS EC2 instance tied to a load balancer. All I had to do was disable HTTP/2 in the Load Balancer attributes and now everything is working as expected!

enter image description here

Hope this helps anyone who had this issue too.

Upvotes: 1

Related Questions