如何更改响应的 headers？

Question

是否可以更改 Response object, as returned by fetch() 的 headers？

假设我想通过 resFn:

转换响应

self.addEventListener('fetch', function (event) {
  event.respondWith(fetch(event.request).then(resFn));
});

resFn() 应该是什么样子？一次尝试：

function resFn(res) {
  res = res.clone();
  res.headers.set("foo", "bar");
  return res;
}

失败 TypeError: Failed to execute 'set' on 'Headers': Headers are immutable。

(一个单独的问答解释 . Given that the the Request and Response objects 惊人的不同（不同的属性，它们的构造函数采用不同的参数），同样的解决方案适用吗？）

Answer 1

这可以通过 "manually" 克隆响应来完成：

function resFn(res) {
  return newResponse(res, function (headers) {
    headers.set("foo", "bar");
    return headers;
  });
}

其中 newResponse() 辅助函数是：

function newResponse(res, headerFn) {

  function cloneHeaders() {
    var headers = new Headers();
    for (var kv of res.headers.entries()) {
      headers.append(kv[0], kv[1]);
    }
    return headers;
  }

  var headers = headerFn ? headerFn(cloneHeaders()) : res.headers;

  return new Promise(function (resolve) {
    return res.blob().then(function (blob) {
      resolve(new Response(blob, {
        status: res.status,
        statusText: res.statusText,
        headers: headers
      }));
    });
  });

}

注意 newResponse() returns 一个 Promise<Response>.

Answer 2

目前的答案相当冗长。您可以通过执行以下操作来实现相同的目的：

const newHeaders = new Headers(initialResponse.headers)
newHeaders.set('foo', 'bar')
const newResponse = new Response(initialResponse.body, {
  headers: newHeaders
})

问题的初步尝试很接近。当您创建 headers object 它不是不可变的，它只有在响应 object.

上设置时才会变得不可变

如何更改响应的 headers？

How to alter the headers of a Response?

javascript

service-worker