Невозможно загрузить изображение с пересекающимся контуром (из CloudFront) в Safari

Я получаю следующую ошибку при попытке загрузить изображение с URL-адреса CloudFront в Safari 8:
Cross-origin image load denied by Cross-Origin Resource Sharing policy.

Это происходит только в Safari 8. В FireFox 38 и Chrome 41 последнее загружается просто отлично. (Mac 10.10)

Моя настройка:

1. 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>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

2. Связанный дистрибутив CloudFront

Следующие заголовки были отмечены белыми (под поведением):

  • Access-Control-Request-Headers
  • Access-Control-Request-Method
  • Origin

3. JavaScript

var img = new Image();
img.crossOrigin = '';
img.onload = function() {
  console.log('image loaded');
}

Что я пробовал:

1. Проверка возвращенных заголовков от завитка

Изображение возвращает правильные заголовки (особенно Access-Control-Allow-Origin)

> curl -sI -H 'Origin: localhost' -H 'Access-Control-Request-Method: GET' http://foo.cloudfront.com/image.jpg
...
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Server: AmazonS3
Vary: Origin,Access-Control-Request-Headers,Access-Control-Request-Method
X-Cache: Hit from cloudfront

2. Проверка возвращенных заголовков в браузере

Интересно, что изображение НЕ возвращает заголовок Access-Control-Allow-Origin: * во всех трех браузерах. Почему это так?

3. Добавление строки запроса в URL

Добавление строки запроса (например,? foo) к загружаемому URL-адресу приведет к возврату заголовка Access-Control-Allow-Origin в браузере и позволяет загружать изображение в Safari! Это здорово, но почему добавление строки запроса позволяет этому работать (а также возвращать заголовок Access-Control-Allow-Origin)?

4. Загрузка изображения из ведра S3 (не привязанного к распределению CloudFront)

Загрузка изображения из другого ведра, не привязанного к CloudFront (с идентичной конфигурацией CORS), также отлично работает в Safari.

Что изначально заставило меня поверить, что это была проблема CloudFront, но вышеупомянутая точка с строкой запроса заставляет меня думать иначе.

Это сводит меня с ума. Может ли кто-нибудь помочь пролить некоторый свет на выше?

Update

Спасибо за ответы. Довольно сложно, я не могу повторить эту проблему.

Ниже приведен фрагмент, который загружает два изображения (одно из ведра S3, другое из его соответствующего распределения Cloudfront), и оба они также кажутся загруженными в точности с заголовками, которые вы ожидаете, вопреки тому, что я сказал выше в точка № 2.

К сожалению, я не очень-то ближе к определенному ответу, но на данный момент я просто собираюсь записать его до ошибки от моего имени, потенциально запрашивая изображение перед установкой CORS, как предложил Дерек.

var img, imgCloudfront;

img = new Image();
img.crossOrigin = '';
img.onload = function() {
  $('body').append('image loaded<br>');
}
img.src = 'http://sandbox-robinpyon.s3.amazonaws.com/test.jpg';

imgCloudfront = new Image();
imgCloudfront.crossOrigin = '';
imgCloudfront.onload = function() {
 $('body').append('image (cloudfront) loaded<br>');
}
imgCloudfront.src = 'http://d32d4njimxij7s.cloudfront.net/test.jpg';
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Ответы

Ответ 1

Двойная проверка настроек вашего облачного режима. Добавил ли пользовательский заголовок Origin. Это должно быть Access-Control-Allow-Origin. Недавно я установил облачный режим и нашел эту статью полезной: http://kennethjiang.blogspot.com/2014/07/set-up-cors-in-cloudfront-for-custom.html

У меня возникли проблемы с очисткой кеша на облачном сервере. Если вы запросили изображение перед настройкой CORS, облачный браузер может просто вернуть то, что было раньше, чтобы ваши новые конфигурации не отражались. Вы можете попробовать запустить недействительность, это одна из вкладков поведения облачного интерфейса. С этим я получил несогласованные результаты. Если вы хотите убедиться, что он работает, загрузите новое изображение и протестируйте его. Я использую рельсы, и иногда я сталкиваюсь с версиями активов, которые заставляют все мои активы иметь новый отпечаток пальца и решают проблемы кэширования, потому что у каждого файла есть новое имя.)

Относительно вашего вопроса о строке запроса. Вероятно, вы потеряли кеш из облачного. Вы можете попытаться повторить упражнение с завитком, чтобы увидеть, что присутствует ответ X-Cache: Hit from cloudfront. В настройках поведения облачного режима есть конфигурация для строк "Forward Query Strings". Это может играть роль.

В моей настройке у меня был промежуточный лак для лака, поэтому я тоже должен был с этим справиться, чтобы убедиться, что все заголовки прошли его. Не похоже, что у вас есть это, но это то, на что нужно следить.

Ответ 3

Это просто предположение, но недостающий заголовок Access-Control-Allow-Origin кажется ключевым моментом для меня. По некоторым причинам другие браузеры могут обойтись без него, но не Safari.
Вы пробовали переделывать свою конфигурацию CloudFront? Подобно перенаправлению всех заголовков вместо белого списка или изменению настроек пересылки строки запроса. И, как говорили другие, предоставьте тестовый URL-адрес, чтобы мы могли проверить себя.

Ответ 4

Попробуйте очистить кеш браузера.

Если это не сработает, укажите URL-адрес для примера.

Ответ 5

Я предполагаю, что это связано с кешем браузера.

Существует проблема, когда S3 пропускает заголовок "Vary: Origin" для не-CORS-запросов. Это приводит к тому, что некоторые браузеры кэшируют ответ не-CORS и повторно используют этот кешированный ответ в последующих запросах, которые нуждаются в CORS, заставляя браузер бросать "нагрузку на изображение с кросс-начальным потоком, лишенную политикой совместного использования ресурсов Cross-Origin". ошибка.

Подробнее см.: S3 CORS, всегда отправляйте Vary: Origin

Проблема также появилась на Форумы AWS S3