服务工作者的获取似乎没有被触发

Question

当浏览器向服务器请求图像时，调用会被后端的 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/imagesgateway/

但是当我通过网关加载图像 (https://localhost:44332/api/imagesgateway/...) 时，我仍然得到 400，当在后端设置断点时，我看到身份验证标头仍然为空。此外，我在控制台中没有看到“获取事件触发”消息。在另一篇文章中说我可以通过以下设置看到注册的服务人员：chrome://inspect/#service-workers 但我也看不到我的工作人员。

我的问题是：为什么没有添加授权标头？是不是因为，虽然注册似乎成功了，但实际上并非如此，因此我也没有在 inspect#service-workers 中看到该工作人员？

Answer 1

您没有在浏览器控制台中看到 fetch event triggered，因为您的 Service Worker 脚本不允许拦截图像请求。这是因为您的 Service Worker 脚本位于您感兴趣的请求范围之外的目录中。

为了拦截处理资源的请求 /api/imagesgateway/ SW 脚本需要位于 /、/api/ 或 /api/imagesgateway/。它不能位于/some/other/directory/service-worker.js。

这就是你的 Service Worker 注册成功的原因！ 注册 SW 没有问题。问题在于它能做什么。

更多信息：Understanding Service Worker scope