0

当浏览器从服务器请求图像时，调用会被后端的 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 中看到该工作人员？

4

1 回答 1

1

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

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

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

更多信息：了解 Service Worker 范围

于 2020-03-26T19:36:32.073 回答