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

Question

大致遵循this answer 并检查header manipulation 上的Angular 文档，我添加了以下拦截器类（如here 所示）。

注意。它被调用并且对请求对象的其他操作（例如使其成为 HTTPS 等）起作用。但是，添加/附加和更新/设置的标头似乎都没有显示。

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);
  }
}

由于某种原因，显示的对象不包含被操纵的标题。我收到以下内容。

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

如果我在控制台中手动运行append 或set，我会看到对象发生了一些变化。遗憾的是，它没有告诉我任何有用的信息 lazyArray 现在包含一个元素，也没有告诉我为什么它在执行期间打印时不包含任何内容。

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

我已经研究了一段时间，我相信我做对了，除了一些我无法检测或诊断的小错误。

如何在拦截器中更改请求的标头对象？

或者，尽管the docs，拦截器是此类功能位置的糟糕选择？那将跟随this suggestion。我还看到someone 通过RequestOptions 和/或更改注入的HttpClient 的this.http.get(...) 参数（如this）提出了不同的方法。

Answer 1

HttpHeaders 上的 set 方法不会改变对象，而是创建一个副本。因此，虽然

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

行不通， [编辑：request 本身是不可变的，因此需要克隆]

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

应该。