How to prevent Angular interceptor from clean error code?

Question

In my project I'm using Angular 15. Inside I'm using two interceptors "HttpRequestInterceptor" and "ErrorInterceptor". The HttpRequestInterceptor deletes the error status code and error message from server response, because when I switch off this interceptor - everything is OK. But I'm need this interceptor for add withCredentials: true to make browser include Cookie on the Request header (HttpOnly Cookie). I'm send test requests to http://httpstat.us/404 - so this is not because of CORS.

Please give me advice - how to handle this situation with this HttpRequestInterceptor?

HttpRequestInterceptor.ts
import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HTTP_INTERCEPTORS } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class HttpRequestInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    req = req.clone({
      withCredentials: true,
    });

    return next.handle(req);
  }
}

and

ErrorInterceptor.ts
import { Injectable } from '@angular/core';
import {HttpRequest,HttpHandler,HttpEvent,HttpInterceptor,HttpErrorResponse} from '@angular/common/http';
import { catchError, Observable, throwError } from 'rxjs';

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      catchError((error) => {
        if (error instanceof HttpErrorResponse) {
          if (error.error instanceof ErrorEvent) {
            console.log('Error Event');
          } else {
            console.log(error);
            switch (error.status) {
              case 401: // Unautorized
                console.log(error.statusText);
                break;
              case 403: // Forbidden
                console.log(error.statusText);
                break;
              case 404: // Not found
                console.log(error.statusText);
                break;
              case 503: // Server error
                console.log(error.statusText);
                break;
            }
          }
        } else {
          console.log('An error occurred');
        }
        return throwError(() => new Error(error.statusText));
      })
    );
  }
}

and

interceptors.ts
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { HttpRequestInterceptor } from './http.interceptor';
import { ErrorInterceptor } from './error.interceptor';

export const interceptorProviders = [
  { provide: HTTP_INTERCEPTORS, useClass: HttpRequestInterceptor, multi: true },
  { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
];

Error browser log without codes

Error browser log with codes

Иван · Accepted Answer · 2022-12-27 11:12:36Z

1

This is my mistake. Adding this fix the code. Sometimes we need take rest and look on task from another angle :)

if (req.url.startsWith('http://localhost:8080/api')) {
  req = req.clone({
    withCredentials: true,
  });
}

edited Dec 27, 2022 at 11:12

answered Dec 27, 2022 at 11:12

Иван

215 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to prevent Angular interceptor from clean error code?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related