Javascript 如何更改请求的标题？

是否可以更改事件接收的对象的标题

两次尝试：

修改现有标题：

self.addEventListener（'fetch'，函数（事件）{
event.request.headers.set（“foo”、“bar”）；
event.respondWith（fetch（event.request））；
});

失败，原因是

未能对“头”执行“设置”：头是不可变的

创建新的

请求
对象：

self.addEventListener（'fetch'，函数（事件）{
var req=新请求（event.Request{
标题：{“foo”：“bar”}
});
事件响应（fetch（req））；
});

无法使用
构造“请求”：无法使用模式为“导航”的请求和非空的RequestInit构造请求。

---

（另请参见）

您是否尝试过与您提到的问题（）类似的解决方案

在ServiceWorker手册中，我们手动复制请求对象以将它们存储在IndexedDB（）中。这是出于另一个原因（我们想将它们存储在缓存中，但我们无法存储POST请求，因为），但它也应该适用于您想要执行的操作

// Serialize is a little bit convolved due to headers is not a simple object.
function serialize(request) {
  var headers = {};
  // `for(... of ...)` is ES6 notation but current browsers supporting SW, support this
  // notation as well and this is the only way of retrieving all the headers.
  for (var entry of request.headers.entries()) {
    headers[entry[0]] = entry[1];
  }
  var serialized = {
    url: request.url,
    headers: headers,
    method: request.method,
    mode: request.mode,
    credentials: request.credentials,
    cache: request.cache,
    redirect: request.redirect,
    referrer: request.referrer
  };



  // Only if method is not `GET` or `HEAD` is the request allowed to have body.
  if (request.method !== 'GET' && request.method !== 'HEAD') {
    return request.clone().text().then(function(body) {
      serialized.body = body;
      return Promise.resolve(serialized);
    });
  }
  return Promise.resolve(serialized);
}

// Compared, deserialize is pretty simple.
function deserialize(data) {
  return Promise.resolve(new Request(data.url, data));
}

---

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

// 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
});

如果原始的

模式是
导航
（这就是您遇到异常的原因），并且您可能希望将重定向传递回浏览器，让它更改其URL，而不是让
获取
处理它

确保不要在GET请求上设置body-fetch不喜欢它，但浏览器有时会在响应POST请求的重定向时使用body生成GET请求
fetch
不喜欢它。
您可以基于原始请求创建一个新请求，并覆盖标题：

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

另请参见：
您是否知道为什么
导航的
模式会出现问题？步骤12.1:“如果请求的模式为“导航”，则抛出一个类型错误。”。如果出现post，请求正文会如何？这正是我需要的！谢谢我快发疯了。你应该添加一些上下文…这个解决方案非常好。您只需在新请求中抛出event.request，并使不可变的头“可变”：D然后您只需在使用新创建的请求时调整头。在获取上下文中，这只是3行代码：）。在我看来，它也非常健壮，并且能够防止错误。