如何更改请求的标头？

是否可以更改标题Request https://developer.mozilla.org/en-US/docs/Web/API/Request接收到的对象fetch https://developer.mozilla.org/en-US/docs/Web/API/FetchEvent event?

两次尝试：

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.

2. 创建新的Request object:

   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.

（也可以看看如何更改响应的标头？ https://stackoverflow.com/questions/35421179/how-to-alter-the-headers-of-a-response)

只要设置所有选项，即可创建新的请求对象：

// 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 请求上设置正文 - fetch 不喜欢它，但浏览器有时会在响应来自 POST 请求的重定向时生成带有正文的 GET 请求。fetch不喜欢它。