Request Header is not updated successfully from interceptor angular 2/4 (401 handling)

Question

I am working with Http interceptor and trying to retry the failed request to handle 401 error. I am trying to set a new header to update the request but it's not working.

I noticed that My header is not being set with the request instead it's going to the lazyUpdates inside headers. Can anyone provide me the any idea why it's happening. After checking my networks I found that with the retry request old header is passed which is 'x-auth-token' and new headers are not sent.

interceptor.ts

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        request = request.clone({
            setHeaders: {
                'x-auth-token': this.authService.getToken()
            }
        });

        return next.handle(request).do(event => {}, err => {
            if (err instanceof HttpErrorResponse && err.status == 401) {

                request = request.clone({
                    setHeaders: {
                        'Content-Type': 'application/json',
                        'Authorization': 'sample-auth'
                    }
                });

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

Header that contains values in lazy loading instead of headers:

I have already gone through this link

Any ideas?

I am still having same issue. would anyone please suggest me what can be done to update headers properly.

Answer 1

I think the problem is with cloning of the request. You need to do something like this.

request = request.clone({
     headers: request.headers.set("Authorization", `sample-auth`)
});