Ereignis Fetch nicht Request-Header

Question

Empfang Es scheint, dass Ereignis innerhalb Servicemitarbeiter holen nicht-Request-Header empfangen, obwohl es in MDN-Dokumentation angegeben:

Sie eine Menge Informationen zu jeder Anforderung abrufen kann durch den Aufruf Parameter des Request-Objekts durch die FetchEvent zurückgegeben:

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

-Code für das Abrufen Ressource von Hauptthread:

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

Ereignishandler innerhalb SW-Datei abrufen:

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

Logging-Header für Ereignis jeder holen gibt mir leeres Objekt:

Kopfzeilen {}

Dies verhindert, dass ich diese spezifische Anfrage zwischenspeichern kann, die nur diese beiden Header benötigt. Anmeldeinformationen sind nicht erforderlich. Fehle ich etwas?

Answer 1

Die Schnittstelle Headers ist iterable, unterstützt einen .get() Accessor und eine .has() Existenzprüfung.

Sie könnten davon profitieren, um die Werte zu lesen, die Ihnen wichtig sind.

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'}`);