Angular Service Worker ngsw-config.json S3 / Cloudflare Image Caching Ошибка CORS

В приложении Angular 9, когда я добавляю этот фрагмент кеширования изображений в ngsw-config.json, я получаю ошибку CORS, и изображения не отображаются. Если я удалю этот фрагмент, приложение будет работать правильно (без ошибок).

Доступ к выборке на https://assets.myurl.net/images/banner.jpg из источника https: // localhost: 8100 заблокирован политикой CORS: нет заголовка Access-Control-Allow-Origin присутствует на запрошенном ресурсе. Если непрозрачный ответ соответствует вашим потребностям, установите для режима запроса значение «no-cors», чтобы получить ресурс с отключенным CORS.

ngsw-config.json (фрагмент):

"assetGroups": [{
    "name": "cdn",
    "installMode": "lazy",
    "updateMode": "lazy",
    "resources": {
        "urls": [
            "https://assets.myurl.net/**"
        ]
    }
}]

Образы хранятся в корзине AWS S3 с конфигурацией CORS:

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

• Cloudflare используется как CDN (и DNS).
• Приложение находится в последних выпусках 9.x: @angular 9.2.1, @ angular / service-worker 9.1.12.
• Добавление crossorigin = "anonymous" в теги img и picture не помогло.

Действия по последовательному воспроизведению ошибки в Chrome / ПК:

1. Очистить кеш браузера
2. Открыть приватный браузер / инкогнито
3. Перейти на веб-сайт - изображения отображаются нормально
4. Нажмите "Обновить" - изображения больше не отображаются - ошибки CORS в консоли браузера

ОБНОВИТЬ

Основываясь на этом сообщении ( S3 не возвращает заголовки Access-Control-Allow-Origin? ), Проблема заключается в том, что работник службы не отправляет Origin в заголовке запроса (поэтому S3 не отправляет заголовки управления доступом).

Запрос Service Worker (скопирован из консоли Chrome):

Request URL: https://assets.myurl.net/images/banner.jpg
Referrer Policy: strict-origin-when-cross-origin
Provisional headers are shown
Referer: https://localhost:8100/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.83 Safari/537.36

Прежде всего, убедитесь, что у каждого запроса есть заголовок Origin. Если заголовок Origin не отправляется, S3 не будет отправлять заголовки управления доступом, поскольку S3 считает их несущественными (и обычно так и есть). Браузер (для которого предназначен механизм CORS) автоматически отправляет заголовок Origin при выполнении HTTP-запросов между источниками через XMLHTTPRequest.

На основе этого сообщения ( S3 - Access-Control-Allow-Origin Header ) скрипт S3 cors был обновлен и теперь включает:

<AllowedMethod>HEAD</AllowedMethod>
<AllowedHeader>*</AllowedHeader>

Добавление crossorigin = "anonymous" в теги img не меняет заголовок запроса сервис-воркера. Так что это не решает проблемы.

Кэш Cloudflare очищен.

Этот непонятный пост (https://community.cloudflare.com/t/access-control-allow-origin-headers-stripped/158102/2) включает:

Если вы добавляете или изменяете конфигурацию CORS на исходном веб-сервере, очистка кеша Cloudflare по URL-адресу НЕ обновляет заголовки CORS.

Я кэшировал изображение banner.jpg, добавив случайную строку запроса (например, banner.jpg? Q = abc). Изображение баннера всегда отображается правильно (в то время как другие изображения по-прежнему показывают ошибки cors). Кеш работника службы на вкладке «Приложение» консоли Chrome> Хранилище кэша показывает, что изображение кэшировано. Конфигурация кэширования Cloudflare «Уровень кэширования» = Стандартный «предоставляет другой ресурс каждый раз, когда изменяется строка запроса».

Однако, если я загружаю новое изображение в S3 banner01.jpg (т.е. еще не кэшировано Cloudflare), я получаю сообщение об ошибке cors, показывающее это изображение. Я пробовал это еще три раза, загрузив разные имена изображений, и не получил ошибки cors. Интересно, что через час даже новые изображения показывают ошибки cors.

Команда curl (которая не указывает Origin в заголовке) успешно выполняется на моем локальном ПК. Ответ не содержит заголовков CORS. например

curl -v "https://assets.myurl.net/images/banner.jpg"

Добавление источника в команду curl возвращает заголовки CORS. например

curl -v --header "Origin: https://www.example.com" "https://assets.myurl.net/images/banner.jpg"

access-control-allow-origin: https://www.example.com
access-control-allow-methods: GET, HEAD
access-control-allow-credentials: true

ОБНОВЛЕНИЕ 2

Я не могу объяснить почему, но теперь Chrome возвращает заголовки cors в ответе на выборку Angular Service Worker. Запрос НЕ включает заголовок Origin.

accept-ranges: bytes
access-control-allow-methods: GET, HEAD
access-control-allow-origin: *

Однако Safari этого не делает. Все браузеры работают нормально, но Safari по-прежнему показывает ошибки cors.

Перейти к своему ведру S3. Щелкните Разрешения, затем Конфигурация CORS. Если у вас есть конфигурация CORS, измените разрешенное происхождение с этого:

<AllowedOrigin>*</AllowedOrigin>

К

<AllowedOrigin>http://*</AllowedOrigin>
<AllowedOrigin>https://*</AllowedOrigin>

Если у вас нет конфигурации CORS, добавьте такую ​​конфигурацию:

<CORSConfiguration>
<CORSRule>
    <AllowedOrigin>http://*</AllowedOrigin>
    <AllowedOrigin>https://*</AllowedOrigin>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>