javascript - 如何更改请求的 header ？

Question

是否可以更改 Request 的标题fetch 接收的对象事件？

两次尝试:

1. 修改现有 header :

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

   失败，无法在“ header ”上执行“设置”: header 不可变。

2. 创建新的请求对象:

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

   失败，构造“请求”失败:无法构造具有模式为“导航”的请求和非空 RequestInit 的请求。

(另见 How to alter the headers of a Response?)

Answer 1

只要您设置了所有选项，就可以创建一个新的请求对象:

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

如果它是 navigate，则不能使用原始的 mode(这就是您遇到异常的原因)并且您可能希望将重定向传递回浏览器以使其更改它的 URL 而不是让 fetch 处理它。

确保您没有在 GET 请求上设置 body - fetch 不喜欢它，但浏览器有时会在响应 POST 请求的重定向时生成带有 body 的 GET 请求。 fetch 不喜欢它。