Работник службы и кэширование изображений из другого домена (aws s3): «не будет кэшировать непрозрачные ответы» - PullRequest
Новая
       22

Работник службы и кэширование изображений из другого домена (aws s3): «не будет кэшировать непрозрачные ответы»

0 голосов
/ 04 февраля 2019

Я пытаюсь сделать сайт доступным в автономном режиме и кэшировать изображения, полученные с 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' для этих изображений, и у меня есть эта конфигурация CORS на AWS S3: 

<?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?Как сделать ответ нормальным, а не непрозрачным?

1 Ответ

0 голосов
/ 05 февраля 2019

Хорошо, это была глупая ошибка.Я поступил правильно, но атрибут crossorigin="anonymous" был установлен на некоторых изображениях, а не на других.Правильная установка всех изображений устраняет проблему.

Сайт, над которым я работаю, использует комбинацию фоновых изображений необычным образом, что затрудняет его отладку.Изображение сверху правильно имело атрибут crossorigin, но другие изображения, скрытые под ним, не имели его, и вызывало все сбои, включая отображение изображения сверху, которое должным образом кэшировалось в автономном режиме.Глупая ошибка.

...