服务人员：将标头附加到CSS和JS文件的请求

Question

我一直在尝试使用服务工作者（看起来像数小时），将简单的标头附加到所有请求。令人沮丧的是，它确实有效。

尝试1：

self.addEventListener("fetch", event => {
   const modifiedHeaders = new Headers({
      ...event.request.headers,
      'API-Key': '000000000000000000001'
   });
   const modifiedRequest = new Request(event.request, {
      headers: modifiedHeaders,
   }); 
   event.respondWith((async () => {
     return fetch(modifiedRequest);
   })());
});

上面的代码适用于HTML文件，但是适用于CSS和JS文件，但出现以下错误

ReferenceError：标头未定义

如果我禁用标头要求，则页面会加载图片和JavaScript，并且可以像平常一样与之交互。

尝试2：

var req = new Request(event.request.url, {
   headers: {
     ...event.request.headers,
      'API-Key': '000000000000000000001'
      },
   method: event.request.method,
   mode:  event.request.mode,
   credentials: event.request.credentials,
   redirect: event.request.redirect,
   referrer: event.request.referrer,
   referrerPolicy: event.request.referrerPolicy,
   bodyUsed: event.request.bodyUsed,
   cache: event.request.cache,
   destination: event.request.destination,
   integrity: event.request.integrity,
   isHistoryNavigation: event.request.isHistoryNavigation,
   keepalive:  event.request.keepalive
 });

这次尝试，我只是建立了一个新请求，该请求成功在CSS和JS文件请求中包含了新的标头。但是，当我执行POST或重定向时，事情将停止工作并表现为异常。

正确的方法是什么？我觉得尝试1是更好的方法，但是无论我做什么，我似乎都无法在请求上创建Headers对象。

我正在使用的Chrome版本是

版本78.0.3904.70（官方内部版本）（64位）

该站点是内部开发人员工具，因此不需要跨浏览器兼容性。因此，我很高兴加载任何其他库/启用实验性功能等。

Answer 1

我会尝试这个：

self.addEventListener("fetch", event => {
    const modifiedRequest = new Request(event.request, {
        headers: {
            'API-Key': '000000000000000000001'
        },
    }); 
    event.respondWith((async () => {
        return fetch(modifiedRequest);
    })());
});