如何更改响应的标头? [英] How to alter the headers of a Response?

问题描述

是否可以更改 Response 对象，由 返回fetch() ?

Is it possible to alter the headers of a Response object, as returned by fetch()?

假设我想通过 resFn 转换响应:

Suppose I want to transform a response via resFn:

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

resFn()应该是什么样?一次尝试:

What should resFn() look like? One attempt:

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

失败，出现 TypeError:无法在标头"上执行设置":标头是不可变的.

(单独的问答解释了如何更改.鉴于 Request 代码> 和 响应 对象惊人地不同(不同的属性，其构造函数采用不同的参数)，是否适用相同的解决方案?)

(A separate question and answer explain how to alter the headers of a request. Given that the the Request and Response objects are surprisingly dissimilar (different properties, and their constructors take different arguments), does the same solution apply?)

推荐答案

这可以通过手动"克隆响应来完成:

This can be done by "manually" cloning the response:

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> .

这篇关于如何更改响应的标头?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！