Question

我尝试使用服务工作者检测图像的错误404。有没有办法获取图像获取的状态代码？

self.addEventListener('fetch', function(event) {

    console.log('Handling fetch event for %s', event.request.url);

    event.respondWith(
        fetch(event.request).then(function(response) {

            if (response.status == 200) {
                return response;                    
            }
            else {
                /* return some default image */
            }

        })        
    );

});

此代码适用于html文件，但是当它获取图像时，状态代码始终为0.有没有办法获取图像的状态代码？我删除了缓存和其他所有内容，以使我的示例变得简单。

这是我尝试加载的示例页面：

<body>
    <!-- This image is working -->
    <img src="http://www.google.ca/images/srpr/logo11w.png">
    <!-- This image returns 404 -->
    <img src="http://www.google.ca/images/srpr/00000.png">
</body>

因此html页面本身状态为200，但两个图像都返回0状态。

Answer 1

您正在获得opaque filtered response，这是您的请求未使用CORS时的预期结果。 status的{{1}}在这种情况下有意模糊 - 如果使用了真实的状态代码，那么在没有CORS的情况下无法获得的信息将会泄漏。

此0规范issue中有一些背景信息。

Answer 2

根据the fetch spec，状态0表示错误。您可能需要检查状态消息。我的猜测是，这是与CORS相关的错误，因为您是从第三方网站获取的。来自Matt Gaunt＆＃39; Introduction to Service Worker：

默认情况下，从第三方网址获取资源会失败不支持CORS。您可以向请求添加非CORS选项克服这一点，虽然这将导致一个不透明的＆＃39;回应，哪个意味着您无法判断响应是否成功。

尝试按照他的建议设置mode: 'no-cors'。

服务工作者图像状态代码

2 个答案: