angular 6 interceptor is called after request is sent

angular interceptor
angular conditional interceptor
angular http interceptor error handling
angular http interceptor response headers
angular interceptor add header
angular 6 interceptor retry request
angular cli generate interceptor

I'm working on an angular 6 app where I want to add an jwt-token to the authorize-header of every request. For this scenario I want to use an interceptor.

The code looks like this:

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

export class AuthInterceptor implements HttpInterceptor {

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    let sessionId = localStorage.getItem('sessionId');
    if (sessionId) {
      request = request.clone({
        setHeaders: {
          Authorization: `Bearer ${sessionId}`

      console.log("With AuthHeader");

    return next.handle(request);

What you are showing is just fine

console.log("Sending"); //here you print to the cosole
return this.httpClient // here you actually MAKE http call.

So your interceptor is called DURING request execution and BEFORE actual XHR request is made.

Top 10 ways to use Interceptors in Angular, It provides a way to intercept HTTP requests and responses to You cannot change the order or remove interceptors later. Then we send the cloned, HTTPS request to the next handler. Before we handle the request, we call the show method and through finalize we can hide the loader when done. Tutorial about Angular 6 and 7 interceptor to handle the HTTP client request, response and error handling

Please try like this one

const headers = request.headers.append('Authorization', `Bearer ${sessionId}`);
const d = request.clone({ headers: headers });

return next.handle(request);

Angular HTTP Interceptors : Multiple Interceptors and 6 Code , When we click on Request data button we send GET Angular applies interceptors in the order that you provide them. The Angular HTTP Interceptor is introduced along with the new HTTPClientModule. The Interceptor helps us to modify the HTTP Request by intercepting it before the Request is sent to the back end. The Interceptor helps us to modify the HTTP Request by intercepting it before the Request is sent to the back end.

I had the same issue.

The interceptor was added to the providers of the CoreModule. When I added it to the providers of the FeatureModule that did the call, it worked as expected.

This is not very convenient of course but works for me at this point because I only have one FeatureModule :)

How To Use Angular Interceptors to Manage HTTP Requests and , In this post, you will learn how to use the Angular 6 and 7 Interceptor to First, create a new Angular app named Angular-Interceptor with the  Angular Interceptor is a powerful feature which can be used in many ways for securing and handling many HTTP related phenomena. HTTP interceptors were available in AngularJS but were missing in Angular 2, so there was a missing gap to manipulate HTTP calls globally at one place.

HttpInterceptor, 5. Add In-app Navigation · 6. Get Data from a Server. Fundamentals. Components & Templates interface HttpInterceptor { intercept(req: HttpRequest​<any>, next: HttpHandler): Most interceptors transform the outgoing request before passing it to the next interceptor in the chain, by calling next.handle(​transformedReq) . The class should define an intercept method to correctly implement HttpInterceptor. The intercept method takes two arguments, req and next, and returns an observable of type HttpEvent. req is the request object itself and is of type HttpRequest. next is the http handler, of type HttpHandler.

Insider's guide into interceptors and HttpClient mechanics in Angular , Dive deep into internals of the HttpClient's interceptors mechanism. We'll when we check the Network tab we should see our headers sent to the server: Angular defines an abstraction called HTTP (request) handler that is  Learn everything about the new Http client introduced in Angular 4.3 and now default in Angular 5 in my latest video course on “Learn HTTP in Angular”.. In the following video lesson I implement an HTTP interceptor which intercepts the request, adding some headers, the response as well as potential HTTP errors.

Creating a custom HttpInterceptor to handle 'withCredentials' in , Client HTTP requests often need to set a few common settings and you don't behavior to for each HTTP request that is sent through the HttpClient. Been back at doing some Angular stuff after a long hiatus and I'm For this post, I needed to create and hook up a custom HttpInterceptor in Angular 6. Hi I am trying to figure out how implement the new angular interceptors and handle 401 unauthorized errors by refreshing the token and retrying the request. This is the guide I have been following:

  • Please check your network tab for the request where the Authorization header is added or not.
  • I did and it is not sent (with different browsers). Interesting side note: fiddler doesn't notice this particular request at all. Every request I make is captured by fiddler, but this one request which results in a 401-response not. Only Wireshark captures this request and the response. And in Wireshark there is no authorization-header as well.
  • I have the same issue did you figure this out?
  • Yes it's working for a while. Thing is, I have no idea what I changed to make it work. The actual code looks very similar to what I posted. Here are some suggestions: make sure, that there is no asynchronous task to fetch the token or something, which finishes when the request is already sent. Second approach, play around with cloning the request object. In newer angular versions the headers-collection is immutable which is tricky to handle. log your request object to the console to make sure that the header is set.
  • Thank you for the replay. As you can see in the screenshot, the error (which occurs because of the 401 response from the server) is catched BEFORE the interceptor is executed, too. And also, apart from the log, the authorization-header not gets sent whith the request...
  • No, this is just how browser console works. Order of printout is not guaranteed and might be delayed in case of objects (exception here). I faces similar wtf issue in the past.
  • This may be true but as I said, apart from the log it doesn't work
  • And that is the different part of story. You can see in the broser what kind of request is actually made and you will see that probably bearer is there.
  • I checked the actual request in the network-tab of different browsers as well as in wireshark and I can say, there is no authorization-header
  • Thanks for the reply. I tried this but it doesn't work