对服务人员的抓捕似乎没有触发

Question

当浏览器从服务器请求图像时，后端的API控制器将接收该调用。在那里，在返回映像之前必须进行授权检查，以检查请求是否被允许。

所以我需要添加授权头，当搜索最佳解决方案时，我发现了这篇文章：https://www.twelve21.io/how-to-access-images-securely-with-oauth-2-0/，我对使用Service Worker的解决方案4非常感兴趣。

我自己实现了，我注册了一名服务人员：

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，当在后端设置断点时，我看到身份验证头仍然为空。另外，我在控制台中没有看到“Fetcheventtriggered”消息。在另一篇文章中指出，我可以通过此设置看到注册的服务人员：chrome://inspect/#service-工人们，但我也没有看到我的工人在那里。

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

Answer 1

您在浏览器控制台中未看到触发的获取事件，因为不允许您的服务人员脚本拦截图像请求。这是因为您的服务工作者脚本位于您感兴趣的请求范围之外的目录中。

为了拦截在/api/imagesgateway/上处理资源的请求，软件脚本需要位于/、/api/或/api/imagesgateway/中。它不能位于/some/other/directory/service worker中。js。

这就是您的服务人员成功注册的原因！注册软件没有问题。问题在于它能做什么。

更多信息：了解服务人员范围