How to intercept XMLHttpRequest (Xhr) requests in Angular + HttpInterceptor

The Angular provides HttpInterceptor to intercept all network requests made by Http or HttpClient service so that you can add headers like Authorization or AppId tokens. But it doesn’t intercept XmlHttpRequest (XHR) requests made explicitly. In this story, we will see how to intercept XHR requests in Angular.

Angular HttpInterceptor:

When you have to pass specific headers or modify the response of REST APIs consumed in Angular application, HttpInterceptor provide a solution to do in a central place. For example, Authorization header where you can pass Auth tokenBearer <auth-token> by reading it from local state or service. Or adding AppId or ApiKeyheaders where you specify these values to consume secured APIs.

Here is the simple HttpInterceptor example where we are passing DUMMY_AUTH_TOKEN value in Authorization token.

You can see the Authorization header is added to outgoing request.