Angular HttpClient returns an error in Safari iOS but works on desktop

Asked by Lillian Khan on
5 Answers

Answer by Zoya Kirby

On my desktop this lists matters nicely with an *ngFor but in Safari on iOS errorMessage prints:, From a performance/speed perspective, does the programming language matter if the solver used is the same? ,Making statements based on opinion; back them up with references or personal experience., Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers

I'm using Angular 5.2.2 and CLI 1.6.5, I have a component with method

getRecentMattersForUser(userId: string) {
        .subscribe(matters => {
        this.matters = matters;
    error => this.errorMessage = JSON.stringify(error));


getRecentMattersForUser(userId: string): Observable<Matter[]> {
    const matterService = environment.serviceBaseUrl + '/Matters?requestFor=' + userId;
    const headers = new HttpHeaders({ 'Content-Type': 'application/json' });

    return this.http.get<Matter[]>(matterService, {
        withCredentials: true,
        headers: headers

I used to use the old Http (instead of HttpClient) like so

private options = new RequestOptions({ 'withCredentials': true });

getRecentMattersForUser(userId: string): Observable<any> {
    const matterService = environment.serviceBaseUrl + '/Matters?requestFor=' + userId;

    return this.http.get(matterService, this.options)


Answer by Zachary Rocha

When I log-in, my POST returns a user object... with a token,I add that token to my session service,I have a token intercepter that adds the Authorization header on each request,the Stackblitz can add headers on Desktop: Chrome & Safari

export class RidesService {

        private http: HttpClient
    ) {

    public getList(): Observable<Ride[]> {
        let url = `/api/rides`;
        let headers = new HttpHeaders('Authorization: testtoken');
        return this.http.get<Ride[]>(url, { headers: headers })
            .do(res => {
            .catch(err => {
                return Observable.of(null);


Answer by Layla Soto

If the request fails on the server, HttpClient returns an error object instead of a successful response.,The same service that performs your server transactions should also perform error inspection, interpretation, and resolution.,HttpClient.get() returns a string rather than the default JSON because of the responseType option.,The HeroesService defines such headers in an httpOptions object that are passed to every HttpClient save method.

      import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

  imports: [
    // import HttpClientModule after BrowserModule.
  declarations: [
  bootstrap: [ AppComponent ]
export class AppModule {}


Answer by Amina Whitehead

Let’s take a look at how to use Angular’s HttpInterceptor interface to make authenticated HTTP requests.,This is also a great spot to cache any failed requests. This comes in handy if we have token refreshing in place and we want to retry the requests once we have a new token.,Now when we make any HTTP request, the user’s token will be attached automatically.,The goal is to include the JWT which is in local storage as the Authorization header in any HTTP request that is sent. The first step is to create an interceptor. To do this, create an Injectable class which implements HttpInterceptor.

npm i --save angular2-jwt