使用 fetch API 时如何记录实际的请求标头答案

【问题标题】：How to log the actual request header when using fetch API使用 fetch API 时如何记录实际的请求标头
【发布时间】：2020-03-12 09:15:25
【问题描述】：

初学者问题，我在我的一个 Cloudflare Service Worker 中使用 fetch API 向第三方发送请求；一切正常，我能够发送请求并接收响应；但是现在我需要记录我发送和接收的所有内容，我不确定我该怎么做；

主要要求： 能够记录正在发送的整个请求标头

问题是我指定的请求标头不是发送的完整标头，就像在下面的示例中我只指定了内容类型，但实际上它会发送应用程序本身添加的更多属性，例如接受、x-forwarded-for、内容长度等

请求：

    var toThirdPartyReqMethod = 'POST';
    var toThirdPartyReqHeader = {'content-type': 'application/json'};    
    var toThirdPartyReqSetting = {
      method: toThirdPartyReqMethod,
      headers: toThirdPartyReqHeader,
      body: toThirdPartyReqBodyArrayBuffer
    };
    var toThirdPartyUrl = "https://somewhere.com";

    var fromThirdPartyResponse = await fetch(toThirdPartyUrl, toThirdPartyReqSetting)

    var fromThirdPartyResponseBodyArrayBuffer = await fromThirdPartyResponse.arrayBuffer();

我可以使用 fromThirdPartyResponse 来消化响应；但我不知道如何记录我发出的确切请求。

我尝试如下：

var oriReqHeaderContentType = fromThirdPartyResponse.request.headers.get("content-type");

但显然这不是正确答案并返回以下错误：

TypeError: 无法读取未定义的属性“标题”

有人知道在使用 fetch API 时如何记录发送的请求吗？

抱歉问初学者问题:(

【问题讨论】：

您是否尝试从浏览器中运行的前端 JavaScript 代码访问请求标头？如果是这样，答案是你不能——在你的前端 JavaScript 代码运行之后，浏览器会添加它自己的请求头。因此，您无法从前端 JavaScript 代码访问完整的请求标头集。您可以访问的唯一请求标头是您在自己的前端代码中明确设置的请求标头。否则，您无法以编程方式确定您的浏览器可能在其发出的请求中包含哪些其他标头。

标签： node.js fetch service-worker fetch-api

【解决方案1】：

您可以像这样访问请求标头

const contentType = req.get("Content-Type");

【讨论】：

是的，我也知道这一点；但是在使用 fetch() 时如何做同样的事情呢？我只知道如何通过这个 var resp = await fetch(url, req); 使用 fetch问题是我不能使用 req 仅仅因为 Cloudflare Service Worker 本身添加了一些我没有指定的请求标头，例如cf-visitor、cf-ew-via 等