Це трохи складніше, ніж свідчить прийнята відповідь.
Підтримка CORS при використанні Cloudfront + S3 реально реалізована в S3, і вона працює так згідно Amazon:
Заголовок Origin запиту повинен відповідати елементу AllowedOrigin.
Метод запиту (наприклад, GET або PUT) або заголовок методу управління доступом у випадку, якщо запит OPTIONS перед передпольотом повинен бути одним із дозволених методів.
Кожен заголовок, зазначений у заголовку запиту Access-Control-Request-Headers у запиті перед польотом, повинен відповідати елементу AllowedHeader.
Це має сенс, що може не бути зрозумілим, що якщо клієнт не надсилає заголовка Origin, то ця обробка взагалі не виконується. І ми використовуємо Cloudfront попереду, який, якщо ви просто розміщуєте статичні активи, ви, ймовірно, налаштували його ігнорувати всі заголовки під час кешування. Тому якщо перший запит до кожного файлу з конкретного крайового вузла не містить заголовка Origin, він буде кешувати відповідь без заголовка Access-Control-Allow-Origin.
Результат полягає в тому, що перший вхідний запит визначатиме, які заголовки повертаються для всіх запитів, поки не закінчиться кеш.
Існує кілька способів виправити це.
- Налаштуйте облачну область для кешування умовного кешування на основі заголовка "Походження".
Це чудово працює, якщо ви очікуєте лише кількох або одного походження, але в іншому випадку співвідношення кешування може стати поганим.
- Використовуйте Lambda @ edge для примусового встановлення заголовків, це можна зробити лише один раз для кожного запиту про вихід (S3).
Повністю гнучка, але додає накладні витрати та вартість.
- Зробіть заставку "замінити" заголовок "Походження" на манекенне значення для кожного запиту.
Це дійсно корисно лише у випадку "Access-Control-Allow-Origin: *", і це трохи хак, але це, мабуть, найкраще поточне рішення при розміщенні статичних активів на cloudfront + S3.