将 Headers 添加到 Service Worker 的响应中

Question

我正在尝试向特定的提取响应添加额外的 headers。我已经安装了一个 service worker ，拦截了请求，但是当我尝试处理它时出现以下错误（复制并添加额外的 headers）。知道如何解决吗？

Uncaught (in promise) DOMException: Failed to execute 'respondWith' on 'FetchEvent': The event handler is already finished.


self.addEventListener('fetch', function(event) {
    console.log("sw request ", event.request);
  if (!event.request.url.startsWith("file://")){
      try{
        event.respondWith(fetch(event.request));
      }catch(err){
        console.log(err);
      }
     return;
   }

 fetch(event.request).then(response => {
  const newHeaders = new Headers(response.headers);
  newHeaders.append('Cache-Control', 'max-age=300');

  const responseExtra = new Response(response.body, {
    status: response.status,
    statusText: response.statusText,
    headers: newHeaders
  });
 event.respondWith(responseExtra);

});

});

Answer 1

respondWidth() 在您的新 Response 进入范围之前被调用。这是由于像 fetch() 这样的 Promises 是如何工作的。尝试类似的东西：

const newResponse = fetch(event.request).then(response => {
  const newHeaders = new Headers(response.headers);
  newHeaders.append('Cache-Control', 'max-age=300');

  return new Response(response.body, {
    status: response.status,
    statusText: response.statusText,
    headers: newHeaders
  });
});

event.respondWith(newResponse);

将 Headers 添加到 Service Worker 的响应中

Add Headers to Response with Service Worker

javascript

promise

service-worker