PreloadJS и Сервисный работник

Question

Я пытаюсь использовать сервисный работник с PreloadJS. Я кэшировал требуемые изображения и затем загружал их, используя caches.match() функция.

Когда я пытаюсь загрузить изображение с помощью jquery, оно работает нормально, но при загрузке с помощью preloadJS выдает следующую ошибку

FetchEvent для "someurl" привел к ответу об ошибке сети: "непрозрачный" ответ был использован для запроса, тип которого не no-cors

Хотя, если я загружаю любое другое изображение, которое не кэшируется, PreloadJS загружает это изображение правильно. Проблема возникает только когда я использую caches.match,

В чем может быть причина этого?

Загрузить изображение с помощью preloadjs

var preload = new createjs.LoadQueue({ crossOrigin: "Anonymous" });

function loadImageUsingPreload() {

  preload.on('complete', completed);

  preload.loadFile({ id: 'someid', src: 'someurl', crossOrigin: true })

};

function completed() {
  var image = preload.getResult("shd");
  document.body.append(image);
};

Загрузить изображение с помощью jquery

function loadImageUsingJquery() {
  jQuery("#image").attr('src', 'someurl');
};

Событие извлечения Service Worker

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {

      if (!response) {
        console.log('fetching...' + event.request.url);
        return fetch(event.request);
      };
      console.log("response", response);
      return response;
    }));
});

Объект ответа при загрузке с использованием PreloadJS или jQuery:

Ответ {тип: "непрозрачный", URL: "", перенаправленный: ложный, статус: 0, нормальный: ложный, …}

Answer 1

Обнаружил ошибку,

На самом деле во время cache.put Я изменял режим объекта запроса на 'no-cors' если бы происхождение не было одинаковым.

Теперь во время события выборки объект запроса события имел свойство 'cors' потому что это был запрос перекрестного происхождения.

Эта разница стоимости mode был причиной ошибки выборки.

Событие установки сервисного работника:

var request = new Request(value);
var url = new URL(request.url);

if (url.origin != location.origin) {
    request = new Request(value, { mode: 'no-cors' });
}

return fetch(request).then(function(response) {
    var cachedCopy = response.clone();
    return cache.put(request, cachedCopy);
});

Я изменил это на:

var request = new Request(value);
var url = new URL(request.url);

return fetch(request).then(function(response) {
    var cachedCopy = response.clone();
    return cache.put(request, cachedCopy);
});

Я должен использовать первый метод для сохранения CDN, потому что второй метод не работает для них, и наоборот для моих изображений, размещенных на облачном фронте.

Я опубликую причину, когда я найду, почему это происходит.