Выбор сервисного работника, похоже, не срабатывает - PullRequest
Новая
       70

Выбор сервисного работника, похоже, не срабатывает

0 голосов
/ 26 марта 2020

Когда браузер запрашивает изображение с сервера, вызов перехватывается контроллером API в серверной части. Там необходимо выполнить проверку авторизации перед возвратом изображения, чтобы проверить, разрешен ли запрос или нет.

Так что мне нужно добавить заголовок авторизации, и при поиске лучшего решения я нашел эту статью: https://www.twelve21.io/how-to-access-images-securely-with-oauth-2-0/, и меня больше всего интересовало решение № 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: // осмотреть / # сервис-работников, но я тоже не вижу там своего работника.

Мой вопрос: почему не добавлен заголовок авторизации? Это потому, что, хотя регистрация кажется go успешной полностью, это на самом деле не так, и поэтому я не вижу работника, который осматривает # сервис-работников?

1 Ответ

0 голосов
/ 26 марта 2020

Вы не видите fetch event triggered в консоли браузера, поскольку ваш сценарий Service Worker не может перехватывать запросы изображений. Это связано с тем, что ваш сценарий Service Worker находится в каталоге за пределами объема запросов, которые вас интересуют.

Чтобы перехватывать запросы, которые обрабатывают ресурсы на /api/imagesgateway/ SW сценарий должен находиться в /, /api/ или /api/imagesgateway/. Он не может быть расположен в /some/other/directory/service-worker.js.

По этой причине ваш сервисный работник успешно регистрируется! В при регистрации SW нет проблем. Проблема заключается в том, что он может сделать.

Дополнительная информация: Понимание области действия сервисного работника

...