HTTP interceptor getting status 0 on failed request using Angular 2,4,6,7,8,9 TypeScript

Question

I have following implementation of HTTP interceptors with Angular ^4.3.6.

import {Injectable} from \"@angular/core\";
import {
  HttpInterceptor         


        

Answer 1

I found out what was causing the issue.. Its a server side issue. You need to set the CORS middleware first then the remaining API middlewares.

Please note i am working with Laravel 5.6 + Angular 5

Wrong Code

'api' => [
            'throttle:60,1',
            'bindings',
            \Barryvdh\Cors\HandleCors::class,
        ],

Currect Code

'api' => [
            \Barryvdh\Cors\HandleCors::class,
            'throttle:60,1',
            'bindings'
        ],

Answer 2

If You are using CORS you should check "Access-Control-Allow-Origin" in your server configuration.

I Solved this on my nginx server adding:

add_header "Access-Control-Allow-Origin" * always;

I missed the "always" parameter which caused me the same problem as yours.

You should pay attention to the value of the header "*" in my example.

The value must contain the list of allowed origins.