Service Worker 和缓存来自其他域的图像 (aws s3)："will not cache opaque responses"

Question

我正在尝试使网站脱机可用并缓存从 AWS S3 检索到的图像。我正在使用工作箱库：

var CACHE_VERSION = '2019-02-03'

// cf https://developers.google.com/web/tools/workbox/guides/get-started
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.6.1/workbox-sw.js')

workbox.routing.registerRoute(
  // Cache image files
  /https:\/\/s3\.amazonaws\.com\/myproject\/img\/.*\.(?:png|jpg|jpeg|svg)/,
  // Use the cache if it's available
  workbox.strategies.cacheFirst({
    // Use a custom cache name
    cacheName: 'image-cache-' + CACHE_VERSION,
    plugins: [
      new workbox.expiration.Plugin({
        // Cache for a maximum of a week
        maxAgeSeconds: 7 * 24 * 60 * 60,
      })
    ],
  })
)

这会导致控制台中的工作箱出现以下错误消息：

The response for 'https://s3.amazonaws.com/myproject/img/icon.png' is an opaque response. The caching strategy that you're using will not cache opaque responses by default.

我已经为这些图像添加了 crossorigin='anonymous' 属性，并且我在 AWS S3 上有这个 CORS 配置：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
  <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

我是不是没有正确使用 CORS？如何使响应成为正常响应而不是不透明响应？

Answer 1

好的，这是一个愚蠢的错误。我做的是正确的，但是 crossorigin="anonymous" 属性是在一些图像上设置的，而不是在其他图像上设置的。在所有图像上正确设置它可以解决问题。

我正在处理的网站以一种不寻常的方式使用背景图像组合，这使得调试变得更加困难。顶部的图像正确地具有 crossorigin 属性，但隐藏在它下面的其他图像没有它，并导致一切失败，包括顶部图像的显示，该图像在离线模式下被正确缓存。愚蠢的错误。

Service Worker 和缓存来自其他域的图像 (aws s3)："will not cache opaque responses"

Service worker and caching images from other domain (aws s3) : "will not cache opaque responses"

service-worker

progressive-web-apps

workbox