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,
  HttpHandler,
  HttpRequest,
  HttpEvent,
  HttpResponse,
  HttpErrorResponse
} from "@angular/common/http";
import {Observable} from "rxjs/Observable";
import "rxjs/add/operator/do";

@Injectable()
export class InterceptorService implements HttpInterceptor {

  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
): Observable<HttpEvent<any>> {
    return next.handle(req).do(evt => {
      console.log(evt);//this logs the success message properly
      if (evt instanceof HttpResponse) {
        //Keep going
      }
    },err => {
    console.log(err);
    //this logs the error but don't have useful info in it.
    });

}
}

On the successful http call, I get following members of evt which are valid on the first console.log.

ok:true
status:200
statusText:"OK"
type:4 

]

But on failure I don't have proper status code from the err block on the second console.log but have following message in DEV console from ZONE.js

zone.js:2263 OPTIONS http://localhost:7001/coreRobo/neuralProcess 404(Not Found)

name:"HttpErrorResponse"
ok:false
status:0
statusText:"Unknown Error" 

I am not sure what I am missing here but I wanted that status to give me something valid like 404,403 or heck 500 when it clearly is that what is happening.

I just wanted those values so that I can show proper message to the UI and help client not panic on failure.

Any help is welcomed. Thanks in advance.

Solution 1

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.

Solution 2

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'
        ],

Comments

[eddyP23]

I would disagree that this is the best configuration option. It leaves your website vulnerable. You should always whitelist a set of domains instead of allowing all of them

[Sonu Gupta]

What could be other soulution ?

[shAkur]

how would you solve this using NestJS?