Service Worker：CSSおよびJSファイルのリクエストにヘッダーを追加します

すべてのリクエストに単純なヘッダーを添付するために、サービスワーカーを（数時間）使用しようとしています。イライラするのは、一種の作品です。

試み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の方が適切な方法だと思いますが、何をしようとも、要求に基づいてヘッダーオブジェクトを作成できないようです。

私が使用しているクロムのバージョンは

バージョン78.0.3904.70（公式ビルド）（64ビット）

このサイトは内部開発者ツールであるため、ブラウザー間の互換性は必要ありません。そのため、追加のライブラリをロードしたり、実験的な機能を有効にしたりできます。

問題は、変更されたリクエストmodeが両方の試行で元のリクエストのを再利用することです

リクエストがマークアップから開始される埋め込みリソースの場合（crossorigin属性が存在しない場合）、リクエストはほとんどの場合no-cors、非常に限定された特定の単純なヘッダーのセットのみを許可するモードを使用して行われます。

no-cors —メソッドがHEAD、GET、またはPOST以外にならないようにし、ヘッダーが単純なヘッダー以外にならないようにします。ServiceWorkersがこれらのリクエストをインターセプトした場合、単純なヘッダー以外のヘッダーを追加またはオーバーライドすることはできません...

リクエストモードのソースと詳細：https : //developer.mozilla.org/en-US/docs/Web/API/Request/mode

：シンプルなヘッダは以下のものです accept（一部の値のみ）、 、accept-language、（content-language唯一のいくつかの値）content-type。

ソース：https : //fetch.spec.whatwg.org/#simple-header：

解決：

no-cors変更されたリクエストを作成するとき以外は、必ずモードを設定する必要があります。クロスオリジンリクエストを許可するかどうかに応じて、corsまたはを選択できsame-originます。（このnavigateモードはナビゲーション専用に予約されており、そのモードでリクエストを作成することはできません。）

コードがHTMLファイルで機能する理由：

新しいページに移動するときに発行されるリクエストは、navigateモードを使用します。Chromeでは、new Request()コンストラクターを使用してこのモードでリクエストを作成することはできませんが、same-originモード付きの既存のリクエストがnavigateパラメーターとしてコンストラクターに渡されると、自動的にモードが自動的に使用されるようです。つまり、変更された最初の（HTMLロード）リクエストにはsame-originモードがありましたが、CSSおよびJSロードリクエストにはno-corsモードがありました。

作業例：

'use strict';

/* Auxiliary function to log info about requests to the console */
function logRequest(message, req) {
  const headersString = [...req.headers].reduce((outputString, val) => `${outputString}\n${val[0]}: ${val[1]}`, 'Headers:');
  console.log(`${message}\nRequest: ${req.url}\nMode: ${req.mode}\n${headersString}\n\n`);
}


self.addEventListener('fetch', (event) => {
  logRequest('Fetch event detected', event.request);

  const modifiedHeaders = new Headers(event.request.headers);
  modifiedHeaders.append('API-Key', '000000000000000000001');

  const modifiedRequestInit = { headers: modifiedHeaders, mode: 'same-origin' };
  const modifiedRequest = new Request(event.request, modifiedRequestInit);

  logRequest('Modified request', modifiedRequest);

  event.respondWith((async () => fetch(modifiedRequest))());
});

私はこれを試します：

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