7

MDN のドキュメントには次のように記載されていますが、Service Worker 内の fetch イベントがリクエスト ヘッダーを受信して​​いないようです。

FetchEvent によって返される Request オブジェクトのパラメーターを呼び出すことにより、各要求に関する多くの情報を取得できます。

event.request.url
event.request.method
event.request.headers
event.request.body

メインスレッドからリソースを取得するためのコード:

fetch(`${companyConfig.base}ticket-scanner/config`, {
    headers: {
        'X-Nsft-Locale' : `en`,
        'X-Nsft-Id': `1`,
    },
}).then((response) => {
    return response.json();
}).then((data) => {...})

SW ファイル内のイベント ハンドラをフェッチします。

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request, {cacheName : CACHE_NAME})
        .then(function(response) {
            if(response) {
                return response;
            }
            console.log(event.request.headers); //Log out headers
            return fetch(event.request).then(function(response){
                return response;
            }).catch(function(err){
                console.error(err);
            })
        })
    )
});

すべてのフェッチ イベントのヘッダーをログに記録すると、空のオブジェクトが得られます。

ヘッダー {}

これにより、これら 2 つのヘッダーのみを必要とするこの特定のリクエストをキャッシュすることができなくなります。資格情報は必要ありません。何か不足していますか？

4

1 に答える 1

11

Headersインターフェイスはiterable.get()で、アクセサーと.has()存在チェックをサポートしています。

そのいずれかを利用して、関心のある値を読み取ることができます。

const request = new Request('https://example.com', {
  headers: {
    'x-header-1': 'header 1 value',
    'x-header-2': 'header 2 value',
  }
});

for (const [header, value] of request.headers) {
  console.log(`${header}: ${value} (via iterator)`);
}

console.log(`'x-header-1' is ${request.headers.get('x-header-1')}`);

console.log(`'x-header-2' ${request.headers.has('x-header-2') ? 'exists' : 'does not exist'}`);

于 2017-11-16T18:20:35.907 に答える