REST API - Cross-Origin Request Block in Mozilla Firefox


Console Message :

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at (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 for more info on providers
  and Angular DI.
export class NinjaServiceProvider {

    private rootURL = "";

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

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

        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);



And your question?

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