REST API - Cross-Origin Request Block in Mozilla Firefox


#1

Console Message :

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://rest-api-ninja.herokuapp.com/api/ninjas. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Http failure response for (unknown url): 0 Unknown Error"
name: "HttpErrorResponse

Below is my provider class :

import {HttpClient, HttpHeaders} from '@angular/common/http';
import {Injectable} from '@angular/core';
import {Observable} from "rxjs/Observable";
import {Ninja} from "../../model/ninja";
import {of} from "rxjs/observable/of";
import {catchError, tap} from "rxjs/operators";

/*
  Generated class for the NinjaServiceProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class NinjaServiceProvider {

    private rootURL = "https://rest-api-ninja.herokuapp.com/api";

    httpOptions = {
        headers: new HttpHeaders({'Content-Type':'application/json'})
    };


    constructor(public http: HttpClient) {
        console.log('Hello NinjaServiceProvider Provider');
    }

    getNinjas():Observable<Ninja[]>{
        return this.http.get<Ninja[]>(this.rootURL+"/ninjas").pipe(
          tap(ninjas=>this.log(`Fetched Ninjas`)),
          catchError(this.handleError('Get Ninja',[]))
        );
    }


    private log(message: String ){
        console.log("Log: "+message);
    }



    /**
     * Handle Http operation that failed.
     * Let the app continue.
     * @param operation - name of the operation that failed
     * @param result - optional value to return as the observable result
     */

    private handleError<T>(operation='operation', result?:T){
        return (error: any ): Observable<T> => {
            // TODO: send the error to remote logging infrastructure

            console.error(error); // log to console instead

            // TODO: better job of transforming error for user consumption

            this.log(`${operation} failed: ${error.message}`);

            //let the app keep running by returning an empty result

            return of(result as T);
        };
    }


}


#2

And your question?

The API response has to contain that header, otherwise the browser will block the response from reaching your app.