service-worker - 服务工作者的获取似乎没有被触发
问题描述
当浏览器从服务器请求图像时,调用会被后端的 API 控制器接收。在那里,必须在返回图像之前进行授权检查,以检查请求是否被允许。
所以我需要添加授权标头,在寻找最佳解决方案时,我发现了这篇文章:https ://www.twelve21.io/how-to-access-images-securely-with-oauth-2-0/和我对使用 Service Worker 的解决方案 4 很感兴趣。
我做了我自己的实现,我注册了一个 serviceWorker:
if ('serviceWorker' in navigator) {
console.log("serviceWorker active");
window.addEventListener('load', onLoad);
}
else {
console.log("serviceWorker not active");
}
function onLoad() {
console.log("onLoad is called");
var scope = {
scope: '/api/imagesgateway/'
};
navigator.serviceWorker.register('/Scripts/ServiceWorker/imageInterceptor.js', scope)
.then(registration => console.log("ServiceWorker registration successful with scope: ", registration.scope))
.catch(error => console.error("ServiceWorker registration failed: ", error));
}
这是在我的 imageInterceptor 中:
self.addEventListener('fetch', event => {
console.log("fetch event triggered");
event.respondWith(
fetch(event.request, {
mode: 'cors',
credentials: 'include',
header: {
'Authorization': 'Bearer ...'
}
})
)
});
当我运行我的应用程序时,我在控制台中看到注册似乎已成功执行,因为我看到打印了 console.logs(ServiceWorker 处于活动状态,onLoad 被调用并成功注册,范围正确:https://localhost:44332/api /图像网关/
但是当我通过网关加载图像(https://localhost:44332/api/imagesgateway/.. .)时,我仍然得到 400 并且在后端放置断点时,我看到身份验证标头仍然为空。此外,我没有在控制台中看到“获取事件触发”消息。在另一篇文章中,我可以通过以下设置看到注册的服务人员:chrome://inspect/#service-workers,但我在那里也看不到我的工作人员。
我的问题是:为什么没有添加授权标头?是不是因为,虽然注册似乎成功了,但实际上并非如此,因此我也没有在 inspect#service-workers 中看到该工作人员?
解决方案
您没有fetch event triggered
在浏览器控制台中看到,因为您的 Service Worker 脚本不允许拦截图像请求。这是因为您的 Service Worker 脚本位于您感兴趣的请求范围之外的目录中。
为了拦截在
/api/imagesgateway/
SW 脚本中处理资源的请求,需要位于
/
、/api/
或/api/imagesgateway/
. 它不能位于/some/other/directory/service-worker.js
.
这就是你的 Service Worker 注册成功的原因!注册软件没有问题。问题在于它能做什么。
更多信息:了解 Service Worker 范围
推荐阅读
- ios - 如何为用户输入文本时将动态创建的每个单元格设置按钮操作(Swift 4)?
- python - 如何将自定义异常抛出到正在运行的任务中
- python - 如何根据列表中每个子项的长度制作布尔掩码?或者我如何过滤掉所有长于 x 的字符串?
- python-3.x - 使用两个 y 轴时如何避免图例重叠?
- android - Android 管理 API 是否支持自定义 DPC 应用程序?
- collections - 在 squeak(Smalltalk) 中的集合是唯一的或不同的
- java - 如何继承功能以减少枚举中的重复代码?
- cron - 在 presta cPanel 上使用 CRON 从服务器导入 XML
- java - 条码扫描仪使用 ML Kit 仅读取 QR 码
- c++ - 如何从 boost beast http_parser 获取 http 请求正文?