时间戳

首页 > 解决方案 > 使用 Service Worker 将标头添加到响应中

javascript - 使用 Service Worker 将标头添加到响应中

问题描述

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

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

});

});

标签： javascriptpromiseservice-worker

解决方案

respondWidth() 在你的 newResponse在范围内之前被调用。这是由于像 fetch() 这样的 Promise 是如何工作的。尝试类似：

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

推荐阅读