2

我正在尝试将 Service Worker 与 PreloadJS 一起使用。我已经缓存了所需的图像，然后使用该caches.match()函数加载它们。

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

“someurl”的 FetchEvent 导致网络错误响应：“不透明”响应用于类型不是 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 加载时的响应对象：

响应 {type: "opaque", url: "", redirected: false, status: 0, ok: false, ...}

4

1 回答 1

1

发现了错误，

实际上，在cache.put我修改请求对象的模式期间，'no-cors'如果来源不同。

现在在 fetch 事件期间，事件的请求对象具有属性'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 上的图像。

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

于 2017-09-02T12:57:11.097 回答