Interceptor Angular 4.3 - Set multiple headers on the cloned request

Question

I just noticed that the Header Object that was possible to use in the previous HTTP RequestsOption is not anymore supported in the new Interceptor.

It\'s the new Int

Answer 1

To append to the existing header of a cloned request (like in an HTTP Interceptor), the code below works (using Angular 5.x). In the case below, it appends to the existing header (which in my case includes the XSRF-TOKEN cookie automatically included by Angular) with a JWT Authorization token stored in sessionStorage:

export class TokenInterceptor implements HttpInterceptor {

    constructor() { }
    intercept(request: HttpRequest, next: HttpHandler): Observable> {

        let headers = request.headers
            .set('Content-Type', 'application/json')
            .set('Authorization', `Bearer ${sessionStorage.getItem('authToken')}`);

        const cloneReq = request.clone({ headers });

        return next.handle(cloneReq);
    }
}