似乎服务工作者内部的获取事件不接收请求标头,尽管在MDN文档中有说明:
您可以通过调用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);
})
})
)
});
每个fetch事件的日志标题都会给我一个空对象:
标题{}
这阻止我缓存此特定请求,该请求只需要这两个标头。证书不是必需的。我错过了什么吗?
答案 0 :(得分:5)
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'}`);