如何更改響應的標題？

Question

是否可以更改由fetch()返回的Response對象的標頭？

假設我想通過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 。

（一個單獨的問答解釋了如何更改請求的標頭 。鑒於Request和Response對象出奇的不同（不同的屬性及其構造函數采用不同的參數），是否適用相同的解決方案？）

Answer 1

這可以通過“手動”克隆響應來完成：

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()返回Promise<Response> 。