CODEWITHSUNDEEP
angularhttptypescriptweb-deploymentangular-http-interceptors
Dinesh Devkota
Dinesh Devkota

Reputation: 1417

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

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.

Upvotes: 6

Views: 13607

Answers (3)

Hadi Nahavandi
Hadi Nahavandi

Reputation: 662

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.

Upvotes: 0

Rameez Rami
Rameez Rami

Reputation: 5728

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

Upvotes: 1

Amine Rebati
Amine Rebati

Reputation: 76

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.

Upvotes: 6

Related Questions