覆盖 Angular2 中 HttpClient 生成的 request-id http header

Question

我有一个使用 HttpClient 向我的后端 API 发送 HTTP POST 请求的简单方法。代码片段：

import { HttpClient } from "@angular/common/http";
//other imports...

export class ApiService {
  private readonly apiUrl: Url;
  private readonly bearerToken: string;
  //other fields...

  public constructor(
    initialData: InitialDataService,
    private readonly httpClient: HttpClient
  ) {
    //some logic here
  }
    public sendCommand(command: ICommand): Observable<void> {
        const { __name, ...data } = command;
    
        return this.httpClient.post<void>(this.createCommandUrl(__name), data, {
          headers: {
            authorization: this.bearerToken,
            "request-id": createGuid()
          }
        });
      }

//...
}

当我运行本地主机中的代码时，我能够在浏览器中看到生成的 Guid。

当我将更改部署到 Azure 应用服务并在浏览器中打开开发人员工具时（在 Firefox 和 Chrome 中测试），我能够看到 request-id 已定义作为值数组而不是我的方法 createGuid():

生成的单个值

还有一些额外的 value-added。不确定为什么它在云中的行为不同...

有没有办法强制浏览器只使用我提供的 request-id 并删除出现的那个额外的？我希望能够对所有类型的 HTTP 调用执行此操作。干杯

Answer 1

您是否在前端使用 applicationinsights-web 之类的东西？如果是这样，那么它有一个功能，它将向所有 XHR 请求添加 request-id 和 request-context headers，除非您明确禁用它。它可能根本不是 Angular HTTP 客户端。

有 4 种配置方式。

将 disableCorrelationHeaders 设置为 true 以针对所有请求关闭它
设置correlationHeaderExcludedDomains以关闭对特定域的请求
设置 correlationHeaderExcludePatterns 以微调哪些请求 include\exlude headers
将 enableCorsCorrelation 设置为 false 以针对所有 CORS 请求关闭它

可在此处获取其他文档：https://github.com/microsoft/ApplicationInsights-JS

而且我相信检查这些配置值的代码的实现在这里：https://github.com/microsoft/ApplicationInsights-JS/blob/05a1f410589514a35e70d425b037888bb3d17d9f/shared/AppInsightsCommon/src/Util.ts#L735

覆盖 Angular2 中 HttpClient 生成的 request-id http header

Override request-id http header produced by HttpClient in Angular2

httpclient

httprequest

http-headers

angular

azure-appservice