PreloadJS与服务工作者

Question

我正在尝试在PreloadJS中使用服务工作者。我已经缓存了所需的图像，然后使用caches.match()函数加载它们。

当我尝试用jquery加载映像时，它工作得很好，但是在用preloadJS加载时会出现以下错误

"someurl“的FetchEvent导致了网络错误响应:对于类型不是cors类型的请求，使用了”不透明“响应。

尽管如果我加载没有缓存的任何其他映像，PreloadJS仍然正确地加载该映像。只有当我使用caches.match时才会出现这个问题。

这可能是什么原因？

使用预加载加载图像

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

服务工作者获取事件

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：""，重定向: false，状态: 0，ok: false，…}

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，因为第二种方法并不适用于它们，反之亦然。

当我发现发生这种情况的原因时，我会发布原因。