Adding header 'Authorization' in Angular

Question

I want to set header for every request.

I am using request.clone for setting header in Angular 7.2.14

import { HttpInterceptor, HttpEvent, HttpRequest, HttpHandler, HttpResponse, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

export class AuthInterceptor implements HttpInterceptor {


    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {        
        const token=localStorage.getItem('token');
        console.log(token);
        request.clone({ headers: request.headers.set('Authorization', token) });    
        return next.handle(request)
    }

}

I am not getting error but I can see Authorization header

You call request.clone() but you ignore the result, which is the new, cloned request, with the header. — JB Nizet
– JB Nizet, Commented Jun 20, 2019 at 5:47
And that's a completely different problem. Google for CORS. The response to the pre-flight request probably doesn't allow for the Authoriation header. See developer.mozilla.org/en-US/docs/Web/HTTP/CORS — JB Nizet
– JB Nizet, Commented Jun 20, 2019 at 5:57
And I already told you that this error is a completely different problem. Google for CORS. The response to the pre-flight request probably doesn't allow for the Authoriation header. See developer.mozilla.org/en-US/docs/Web/HTTP/CORS. Fixing the frontend code won't magically fix your server configuration. — JB Nizet
– JB Nizet, Commented Jun 20, 2019 at 6:09

Javascript Hupp Technologies · Accepted Answer · 2019-06-20 06:11:52Z

4

You are returning old request not cloned one.

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

    return next.handle(request);
}

edited Jun 20, 2019 at 6:11

answered Jun 20, 2019 at 5:50

Javascript Hupp Technologies

2,1752 gold badges15 silver badges28 bronze badges

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

Comments

zmag · Accepted Answer · 2019-06-20 05:47:23Z

2

request.clone() returns an object, doesn't mutate the origin.

try pass request.clone() as parameter.

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {        
        const token=localStorage.getItem('token');
        console.log(token);    
        return next.handle(request.clone({ headers: request.headers.set('Authorization', token) });)
    }

answered Jun 20, 2019 at 5:47

zmag

8,27112 gold badges39 silver badges47 bronze badges

1 Comment

Apoorv Srivastava Over a year ago

Tried but getting blocked by CORS policy

Collectives™ on Stack Overflow

Adding header 'Authorization' in Angular

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related