How to alter the headers of a Request?

Question

Is it possible to alter the headers of the Request object that is received by the fetch event?

Two attempts:

1. Modify existing headers:

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

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

2. Create new Request object:

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

   Fails with Failed to construct 'Request': Cannot construct a Request with a Request whose mode is 'navigate' and a non-empty RequestInit.

(See also How to alter the headers of a Response?)

Answer 1

Creating a new request object works as long as you set all the options:

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

You cannot use the original mode if it is navigate (that's why you were getting an exception) and you probably want to pass redirection back to browser to let it change its URL instead of letting fetch handle it.

Make sure you don't set body on GET requests - fetch does not like it, but browsers sometimes generate GET requests with the body when responding to redirects from POST requests. fetch does not like it.

Answer 2

You can create a new request based on the original one and override the headers:

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

See also: https://developer.mozilla.org/en-US/docs/Web/API/Request/Request