从其他域服务工作者和缓存图像（AWS S3）：“不会缓存不透明回应”

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,
      })
    ],
  })
)

这导致从控制台箱里以下错误信息：

关于“https://s3.amazonaws.com/myproject/img/icon.png”的响应是一个不透明的响应。您使用不会缓存默认为不透明响应的缓存策略。

我已经添加了这些图像的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属性，但其下隐藏着其他的图片没有它，并造成一切失败，包括图像的顶部显示，这是正确的在离线模式下缓存。愚蠢的错误。