如何更改请求的标头？

Question

是否可以更改 fetch 事件接收的 Request 对象的标头？

两次尝试：

1. 修改现有标头：

    self.addEventListener('fetch', function (event) {
     event.request.headers.set("foo", "bar");
     event.respondWith(fetch(event.request));
   });

失败并显示 Failed to execute 'set' on 'Headers': Headers are immutable 。

1. 创建新的 Request 对象：

    self.addEventListener('fetch', function (event) {
     var req = new Request(event.request, {
       headers: { "foo": "bar" }
     });
     event.respondWith(fetch(req));
   });

失败 Failed to construct 'Request': Cannot construct a Request with a Request whose mode is 'navigate' and a non-empty RequestInit.

（另请参阅 如何更改响应的标头？ ）

原文由 mjs 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

只要您设置了所有选项，就可以创建一个新的请求对象：

 // request is event.request sent by browser here
var req = new Request(request.url, {
    method: request.method,
    headers: request.headers,
    mode: 'same-origin', // need to set this properly
    credentials: request.credentials,
    redirect: 'manual'   // let browser handle redirects
});

您不能使用原始的 mode 如果它是 navigate （这就是您遇到异常的原因）并且您可能希望将重定向传递回浏览器以让它更改其 URL 而不是让 fetch 处理它。

确保你没有在 GET 请求上设置 body - fetch 不喜欢它，但浏览器有时会在响应来自 POST 请求的重定向时生成带有 body 的 GET 请求。 fetch 不喜欢。

原文由 pirxpilot 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以根据原始请求创建一个新请求并覆盖标头：

 new Request(originalRequest, {
  headers: {
    ...originalRequest.headers,
    foo: 'bar'
  }
})

另请参阅： https ://developer.mozilla.org/en-US/docs/Web/API/Request/Request

原文由 caisah 发布，翻译遵循 CC BY-SA 4.0 许可协议