无法在 Angular 中看到添加到 HTTP 请求的标头

Question

Following roughly this answer and checking with Angular docs on header manipulation , I added the following interceptor class (as shown here ).

NB. It gets invoked and other operation on the request object (like making it HTTPS etc.) work. However, the neither the added/appended nor the updated/set header seem to show.

export class CoolInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler)
    : Observable<HttpEvent<any>> {

    request.headers.append("Shazoo", "Hazaa");
    request.headers.set("Content-Type", "application/text");

    console.log(request.headers);

    return next.handle(request);
  }
}

For some reason, the object displayed doesn't contain the manipulated headers. I'm getting the following.

HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, headers: Map(0)}

If I manually run append or set in the console, I see that the object changes a bit. Regrettably, it doesn't tell me anything useful that the lazyArray contains an element now nor why it doesn't contain anything while printed during the execution.

HttpHeaders {normalizedNames: Map(0), lazyUpdate: Array(1), headers: Map(0), lazyInit: HttpHeaders}

I've been reeding on this for a while and I believe I got it right, except something small misstake that I'm unable to detect or diagnose.

How do I alter the headers object of my request in the interceptor?

Or is the interceptor a poor choice of locations for such functionality, despite the docs ? That wouldfollow this suggestion . I've also seen someone suggest a different approach by RequestOptions and/or by altering the this.http.get(...) parameters of the injected HttpClient , like this .

Answer 1

The set method on HttpHeaders doesn't mutate the object, but creates a copy. Therefore, while

    request.headers.set("Content-Type", "application/text");

won't work, [edit: request itself is immutable, therefore it needs to be cloned]

    const clonedWithRequiredHeaders = request.clone({
        setHeaders: {"Content-Type": "application/text"},
    })

should.