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

运行应用程序时，我在控制台中看到控制台似乎成功执行了注册。打印了日志（ServiceWorker处于活动状态，调用了onLoad并以正确的范围成功注册：https://localhost:44332/api/imagesgateway/ < / p>

但是，当我通过网关加载图像（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中。

这是您的服务人员成功注册的原因！注册软件中没有任何内容。问题在于它可以做什么。

更多信息：Understanding Service Worker scope

似乎未触发对服务人员的获取

1 个答案: