Angular interceptor exclude specific urls

Question

I am writing interceptors such that I don't have to handle the headers in every service calling my web api. The problem with this is that 99% of my calls require 1 specific set of headers, but the other 1% only require 1 of the headers and will not work with the others present. With this being known my idea is to make 2 interceptors, the first will add the 1 header that they all use and the second will add the rest of the headers, with the second excluding the 1%.

The following is how I am going about excluding the 1%, which works, but I want to see if there is a better way of going about this:

intercept(request: HttpRequest<any>, next:HttpHandler: Observable<HttpEvent<any>> {
  let position = request.url.indexOf('api/');
  if (position > 0){
    let destination: string = request.url.substr(position + 4);
    let matchFound: boolean = false;

    for (let address of this.addressesToUse){
      if (new RegExp(address).test(destination)){
        matchFound = true;
        break;
      }
    }

    if (!matchFound){
      ...DO WORK to add the headers
    }
  }

If it's 1%, it may be worth looking into making a seperate HTTP client. — Phix
– Phix, Commented Apr 4, 2019 at 18:02
Does this answer your question? Disable Angular HttpInterceptor for some call — fasfsfgs
– fasfsfgs, Commented Aug 18, 2021 at 14:27

enne87 · Accepted Answer · 2023-04-24 07:24:23Z

68

Update from Angular 12, use "context", see this SO

I suggest that, in spite of check the request, you can use the header to add a "skip" property, if the header has the skip property, simple return the reqs

export class CustomInterceptor implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        if (req.headers.get("skip"))
           return next.handle(req);
      
        ....
    }
}

And you make all the calls you need "skip" the interceptor like

this.http.get(url, {headers:{skip:"true"}});

edited Apr 24, 2023 at 7:24

enne87

2,3298 gold badges36 silver badges63 bronze badges

answered Apr 4, 2019 at 18:31

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

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

2 Comments

Bigeyes Over a year ago

Sorry for my stupid. I can't find the options {headers:{skip:"true"} online.

Eliseo Over a year ago

You can add any header you want. I like the name "skip", but you can choose what ever (e.g. in some platform for e-comerce you add some like API-KEY)

Ihor · Accepted Answer · 2022-04-18 16:59:17Z

28

after checking for req.headers.get("skip") as Eliseo suggested, I'd recommend removing this header from request since it's Angular-related only and it should not be transmitted to the API (actually it can cause issues)

const skipIntercept = request.headers.has('skip');

if (skipIntercept) {
    request = request.clone({
        headers: request.headers.delete('skip')
    });
}

edited Apr 18, 2022 at 16:59

answered Jul 8, 2020 at 11:45

Ihor

7618 silver badges13 bronze badges

Comments

dmoore1181 · Accepted Answer · 2019-04-08 18:44:09Z

What I wound up doing is having an array of urls (in Regex Format) that I did not want to be used in the interceptor like so:

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

@Injectable()
export class AddCustomHeadersInterceptor implements HttpInterceptor {
  urlsToNotUse: Array<string>;

  constructor(
  ) {

    this.urlsToNotUse= [
      'myController1/myAction1/.+',
      'myController1/myAction2/.+',
      'myController1/myAction3'
    ];
  }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (this.isValidRequestForInterceptor(request.url)) {
      let modifiedRequest = request.clone({
        setHeaders: {
          //DO WORK HERE
        }
      });

      return next.handle(modifiedRequest);
    }
    return next.handle(request);
  }

  private isValidRequestForInterceptor(requestUrl: string): boolean {
    let positionIndicator: string = 'api/';
    let position = requestUrl.indexOf(positionIndicator);
    if (position > 0) {
      let destination: string = requestUrl.substr(position + positionIndicator.length);
      for (let address of this.urlsToNotUse) {
        if (new RegExp(address).test(destination)) {
          return false;
        }
      }
    }
    return true;
  }
}

Myk Willis · Accepted Answer · 2021-04-02 03:55:10Z

18

When created by default, HttpClient will use interceptor. If you want to avoid this, you can create another instance of HttpClient using constructor.

@Injectable()
class Service {
  private customHttpClient: HttpClient;

  constructor(backend: HttpBackend) {
    this.customHttpClient = new HttpClient(backend);
  }
}

The customHttpClient instance will not use the interceptor.

edited Apr 2, 2021 at 3:55

Myk Willis

12.9k5 gold badges50 silver badges65 bronze badges

answered Aug 27, 2020 at 12:44

Андрей Керничный

3012 silver badges4 bronze badges

1 Comment

CREM Over a year ago

I think this is the best straight forward way to do it

takrishna · Accepted Answer · 2019-04-04 18:16:27Z

1

You can try to extent HttpClient instead of using Interceptors.

In an Interceptor World every request is stopped - massaged (headers are added) - before executed.

In a HttpClient World it would be taken care at the time of Client object instantiation.

If you deem it necessary, you can consider having different variants per se, HttpClient99Percent variant, HttpClientOnePercent variant etc.

Below link can give you a head start:

https://medium.com/@admin_87321/extending-angular-httpclient-6b33a7a1a4d0

answered Apr 4, 2019 at 18:16

takrishna

5,0273 gold badges22 silver badges36 bronze badges

Comments

suhailvs · Accepted Answer · 2021-09-15 02:42:20Z

0

update of Андрей Керничный's answer

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

@Injectable({
  providedIn: 'root'
})
export class CartService {
  private customHttpClient: HttpClient;

  constructor(private http: HttpClient, backend: HttpBackend) { 
    this.customHttpClient = new HttpClient(backend);
  }

  getZohoItems() {
    // call zoho url
    return this.customHttpClient.get('http://zoho.com/api/orders/');
  }

  getItems() {
    // call localhost:8000 url
    return this.http.get('/api/orders/');
  }
}

answered Sep 15, 2021 at 2:42

suhailvs

21.9k15 gold badges104 silver badges104 bronze badges

Comments

Shravan Vishwakarma · Accepted Answer · 2022-06-30 05:31:37Z

0

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
if (req.url.indexOf('Url that you want to hide') === -1) {
  this.spinner.show();
  return next.handle(req).pipe(
    finalize(() => this.spinner.hide())
  );
}
if (req.url.indexOf('Url that you want to hide') !== -1) {
  this.spinner.hide();
}
return next.handle(req);

}

answered Jun 30, 2022 at 5:31

Shravan Vishwakarma

11 silver badge

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Angular interceptor exclude specific urls

7 Answers 7

2 Comments

Comments

Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

Comments

Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related