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

user_2008447 0
Viewed 11421

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.

angular-http-interceptors angular typescript web-deployment http
3 Answers

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

In Asp.net core API I solved this problem by writing "UseCors" before UseAuthentication and UseAuthorization, mainly because when the authentication service is before CORS service when the authentication service goes back directly, it doesn't set the CORS header for it.

user_27217370
Related