覆盖 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()
          }
        });
      }

//...
}

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

当我将更改部署到 Azure 应用程序服务并在浏览器中打开开发人员工具（在 Firefox 和 Chrome 中测试）时，我可以看到请求 ID 被定义为一个值数组而不是生成的单个值通过我的方法 createGuid()：

还有一些附加值。 不知道为什么它在云中的行为不同......

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

Answer 1

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

有 4 种配置方式。

1. 将disableCorrelationHeaders设置为true以关闭所有请求
2. 设置correlationHeaderExcludedDomains以关闭对特定域的请求
3. 设置correlationHeaderExcludePatterns以微调哪些请求包含\排除标头
4. 将enableCorsCorrelation设置为false以关闭所有 CORS 请求

此处提供其他文档： https://github.com/microsoft/ApplicationInsights-JS

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