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属性，但隐藏在其下的其他图像则没有crossorigin属性，并导致一切失败，包括顶部图像的显示，该图像已在脱机模式下正确缓存。愚蠢的错误。

服务工作者和其他域（aws s3）的缓存图像：“将不缓存不透明的响应”

1 个答案: