How to change response headers?

Question

Is it possible to change the headers of the Response object returned by fetch() ?

Suppose I want to convert a response through resFn :

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

What should resFn() look like? One try:

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

Failure with TypeError: Failed to execute 'set' on 'Headers': Headers are immutable .

(A separate question and answer explains how to change the request headers . Given that Request and Response objects are surprisingly different (different properties, and their constructors take different arguments), does the same decision?)

Answer 1

This can be done by manually cloning the response:

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

where the helper function 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 })); }); }); } 

Note that newResponse() returns a Promise<Response> .