如何更改请求的标题？

Question

是否可以更改提取事件接收的请求对象的标头？

两次尝试：

>

修改现有标题：

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

失败，原因是未能对“头”执行“设置”：头是不可变的。

创建新的请求对象：

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

失败与未能构造请求：不能构造一个请求的模式是导航和一个非空的请求。

（另请参见如何更改响应的标题？）




Answer 1

你有没有尝试过类似于你提到的问题中的解决方案（如何改变响应的标题？）？

在ServiceWorker手册中，我们手动复制请求对象以将它们存储在IndexedDB中(https://serviceworke.rs/request-deferrer_service-worker_doc.html).这是另一个原因（我们想将它们存储在缓存中，但我们无法存储POST请求，因为https://github.com/slightlyoff/ServiceWorker/issues/693)，但它也应该适用于您想要做的事情。

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

Answer 2

您可以基于原始请求创建新请求并覆盖标题：

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

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

Answer 3

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

// 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请求上设置主体——获取不喜欢它，但是浏览器在响应来自POST请求的重定向时，有时会用主体生成GET请求。获取不喜欢它。