Disable Angular HttpInterceptor for some call

Question

I have an angular application with an HttpInterceptor that catch the http errors to show some dialog, common to all my application.

I would like to disable the interceptor for some specific calls but I prefer to disable the default behaviour where i call the http, instead of write an exception into the interceptor. Anyone have found this problem?

I can be more specific with an example, if needed.

Regards

Davide

Answer 1

With Angular 12, it's possible now to include some metadata (with HttpContext) in your call that can be used within the interceptor to make decisions (or anything you want really).

Example

Your interceptor:

export const BYPASS_LOG = new HttpContextToken(() => false);

export class MyLogInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (req.context.get(BYPASS_LOG) === true)
      return next.handle(req);

    console.log(`req to ${req.url}`);

    return next.handle(req);
  }
}

Your service:

httpClient.get('https://example.com/', { context: new HttpContext().set(BYPASS_LOG, true) });

You can checkout angular docs for more information:

• Intercepting requests and responses
• Passing metadata to interceptors

Answer 2

You can use HttpBackend to do this.

Description: When injected, HttpBackend dispatches requests directly to the backend, without going through the interceptor chain.

Using: You can use same like HttpClientby import it from @angular/common/http

Example:

import { HttpClient, HttpBackend } from '@angular/common/http';

...

@Injectable({
  providedIn: 'root'
})
export class HttpHelperService {

  private httpClient: HttpClient;

  constructor( httpBackend: HttpBackend) { 
     this.httpClient = new HttpClient(httpBackend);
  }

  // use like normal with HttpClient. However, should name it carefully to separate which http request go throught interceptor and which is not
  put(path: string, body: Object = {}): Observable<any> {
    return this.httpClient.put(
      `${this.URL}${path}`,
      JSON.stringify(body)
    ).pipe(catchError(this.formatErrors));
  }

....

ref: https://angular.io/api/common/http/HttpBackend