Question

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

当我尝试使用jquery加载图像时，它工作正常，但在使用preloadJS加载时会出现以下错误

FetchEvent for＆＃34; someurl＆＃34;导致网络错误响应：＆＃34;不透明＆＃34;响应用于类型不是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 fetch event

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加载时的响应对象：

回复{type：＆＃34; opaque＆＃34;，url：＆＃34;＆＃34;，重定向：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，因为第二种方法不能用于它们，反之亦然，因为我在cloudfront上托管的图像。

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

PreloadJS和服务工作者

1 个答案: