Правильная конфигурация SOS + Cloudfront CORS?
Мое приложение хранит изображения на S3, а затем проксирует их через Cloudfront. Я рад использовать новую поддержку SOS CORS, чтобы использовать методы canvasа HTML5 (которые имеют политику перекрестного происхождения), но не могут правильно настроить мои S3 и Cloudfront. При попытке конвертировать изображение в элемент canvasа все равно выполняется «Ошибка нечиста: SECURITY_ERR: DOM Exception 18».
Вот что я до сих пор:
S3
- exif проблема вращения изображения с использованием несущей и rmagick для загрузки на s3
- Amazon CloudFront Latency
- Как сделать все объекты в объявлении AWS S3 общедоступными по умолчанию?
- FTP / SFTP доступ к ведро Amazon S3
- CloudFront + S3 Website: «Указанный ключ не существует», когда должен отображаться неявный индексный документ
MY_WEBSITE_URL GET 3000 * MY_CLOUDFRONT_URL GET * CloudFront
происхождения
Origin Protocol Policy: Match Viewer HTTP Port: 80 HTTPS Port: 443
поведения
Origin: MY_WEBSITE_URL Object Caching: Use Origin Cache Headers Forward Cookies: None Forward Query Strings: Yes
Здесь что-то не хватает?
UPDATE: просто попробовал изменить заголовки на
Content-* Host
основанный на этом вопросе Amazon S3 CORS (совместное использование ресурсов Cross-Origin) и загрузка кросс-домена Firefox
Все еще нет.
ОБНОВЛЕНИЕ: БОЛЬШЕ ИНФОРМАЦИИ ПО ЗАПРОСУ
Request URL:https://d1r5nr1emc2xy5.cloudfront.net/uploaded/BAhbBlsHOgZmSSImMjAxMi8wOS8xMC8xOC81NC80Mi85NC9ncmFzczMuanBnBjoGRVQ/32c0cee8 Request Method:GET Status Code:200 OK (from cache)
ОБНОВИТЬ
Я думаю, может быть, моя просьба была неправильной, поэтому я попытался включить CORS с
img.crossOrigin = '';
но тогда изображение не загружается, и я получаю сообщение об ошибке: загрузка изображения с использованием кросс-оригинала, запрещенная политикой совместного использования ресурсов Cross-Origin.
- Как перечислить все объекты AWS S3 в ведре с помощью Java
- S3 REST API и метод POST
- Amazon S3: статические веб-сайты: пользовательский домен или субдомен
- Создайте ведро в Amazon S3
- S3cmd: как скопировать файлы из локального в ведро S3 с существующей структурой
- Как долго я должен ждать после применения политики AWM IAM до того, как она будет действительна?
- Установить кеш-контроль для всего ведра S3 автоматически (используя политики ведра?)
- S3 - заголовок заголовка Access-Control-Allow-Origin
26 июня 2014 года AWS выпустила правильное поведение Vary: Origin на CloudFront, так что теперь вы просто
-
Задайте конфигурацию CORS для вашего ведра S3, включая
* -
В CloudFront -> Distribution -> Behaviors для этого источника используйте опцию Forward Headers: Whitelist и белый список заголовка Origin.
-
Подождите ~ 20 минут, в то время как CloudFront распространяет новое правило
Теперь ваш дистрибутив CloudFront должен кэшировать разные ответы (с соответствующими заголовками CORS) для разных заголовков Origin клиента.
UPDATE: это уже не так с недавними изменениями в CloudFront. Yippee! См. Другие ответы для деталей. Я оставляю это здесь для контекста / истории.
проблема
CloudFront не поддерживает CORS 100%. Проблема в том, как CloudFront кэширует ответ на запрос. Любой другой запрос для того же URL-адреса после этого приведет к кэшированному запросу независимо от источника . Ключевой частью этого является то, что он включает заголовки ответов из источника.
Первый запрос до того, как CloudFront имеет что-либо кэшированное из Origin: http://example.com имеет заголовок ответа:
Access-Control-Allow-Origin: http://example.com
Второй запрос от Origin: https://example.com (обратите внимание, что это HTTPS, а не HTTP) также имеет заголовок ответа:
Access-Control-Allow-Origin: http://example.com
Потому что именно CloudFront кэшируется для URL. Это неверно – консоль браузера (по крайней мере, в Chrome) покажет сообщение о нарушении CORS, и все сломается.
Временное решение
Предлагаемая работа заключается в использовании разных URL-адресов для разных источников. Хитрость заключается в том, чтобы добавить уникальную строку запроса, которая отличается от другой, так что есть одна кэшированная запись для каждого источника.
Таким образом, наши URL-адреса будут примерно такими:
http://.../some.png?http_mysite.com https://.../some.png?https_mysite.com
Такие работы, но каждый может заставить ваш сайт работать плохо, заменяя querystrings. Это возможно? Вероятно, не отладка этой проблемы – это огромная проблема.
Правильное обходное решение – не использовать CloudFront с CORS, пока они не будут полностью поддерживать CORS.
На практике
Если вы используете CloudFront для CORS, обратитесь к другому методу, который будет работать, когда CORS этого не сделает. Это не всегда вариант, но сейчас я динамически загружаю шрифты с помощью JavaScript. Если запрос CORS для CloudFront завершился неудачно, я возвращаюсь к серверному прокси к шрифтам (а не к перекрестному происхождению). Таким образом, все работает, даже несмотря на то, что CloudFront каким-то образом получил плохую кэшированную запись для шрифта.
Не совсем уверен в вашей проблеме:
https://forums.aws.amazon.com/thread.jspa?messageID=377513
ответил на некоторые из моих проблем с CORS, S3 и Cloudfront.
Я также обнаружил, что некоторые активы в ведре возвращаются с правильными заголовками CORS, а некоторые – нет. После недействительности активов все они вернулись с правильными заголовками, не уверены, почему некоторые из них нуждаются в недействительности, а другие – нет, поскольку они были загружены в одно и то же время, в том же типе же ведро 🙁