Подтвердить что ты не робот

Политика CORS в кэшированном изображении

В хроме 22 и сафари 6.

Загрузка изображений из s3 для использования в холсте (с извлечением в качестве основного намерения) с использованием ведро C3 с поддержкой CORS со следующим кодом:

<!-- In the html -->
<img src="http://s3....../bob.jpg" /> 

// In the javascript, executed after the dom is rendered
this.img = new Image();
this.img.crossOrigin = 'anonymous';
this.img.src = "http://s3....../bob.jpg";

Я заметил следующее:

  • Отключить кеширование
  • Все работает нормально, загрузка обоих изображений

Затем попробуйте его с включенными кешами:

  • Включение кешей
  • Загрузка изображений DOM, изображение холста создает исключение безопасности dom

Если я модифицирую часть javascript кода для добавления строки запроса, например:

this.img = new Image();
this.img.crossOrigin = 'anonymous';
this.img.src = "http://s3....../bob.jpg?_";

Все работает, даже если кеширование включено полностью. Я попал в проблему с кэшированием, используя прокси-сервер http и наблюдая, что в случае сбоя изображение на самом деле не запрашивается с сервера.

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

Является ли это предполагаемым поведением?

Изменить: работает в firefox.

Edit2: политика Cors на ведро s3

<?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>

Я использую широко открытый, потому что сейчас я просто тестирую свой локальный ящик. Это еще не в производстве.

Edit3: Обновлена ​​политика cors для указания источника

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

Проверенные исходящие заголовки:

Origin  http://localhost:5000
Accept  */*
Referer http://localhost:5000/builder
Accept-Encoding gzip,deflate,sdch
Accept-Language en-US,en;q=0.8
Accept-Charset  ISO-8859-1,utf-8;q=0.7,*;q=0.3

Входящие заголовки:

Access-Control-Allow-Origin http://localhost:5000
Access-Control-Allow-Methods    GET
Access-Control-Allow-Credentials    true

По-прежнему не удается выполнить хром, если я не перегружаю кеш при загрузке в холст.

Изменить 4:

Просто заметил это в случае сбоя.

Исходящие заголовки:

GET /373c88b12c7ba7c513081c333d914e8cbd2cf318b713d5fb993ec1e7 HTTP/1.1
Host    amir.s3.amazonaws.com
User-Agent  Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.4 (KHTML, like Gecko) Chrome/22.0.1229.91 Safari/537.4
Accept  */*
Referer http://localhost:5000/builder
Accept-Encoding gzip,deflate,sdch
Accept-Language en-US,en;q=0.8
Accept-Charset  ISO-8859-1,utf-8;q=0.7,*;q=0.3
If-None-Match   "99c958e2196c60aa8db385b4be562a92"
If-Modified-Since   Sat, 29 Sep 2012 13:53:34 GMT

Входящие заголовки:

HTTP/1.1 304 Not Modified
x-amz-id-2  3bzllzox/vZPGSn45Y21/vh1Gm/GiCEoIWdDxbhlfXAD7kWIhMKqiSEVG/Q5HqQi
x-amz-request-id    48DBC4559B5B840D
Date    Sat, 29 Sep 2012 13:55:21 GMT
Last-Modified   Sat, 29 Sep 2012 13:53:34 GMT
ETag    "99c958e2196c60aa8db385b4be562a92"
Server  AmazonS3

Я думаю, что это первый запрос, вызванный dom. Я не знаю, что это не запрос javascript.

4b9b3361

Ответ 1

Проблема заключается в том, что изображение кэшируется из прежнего запроса без необходимых заголовков CORS. Таким образом, когда вы запрашиваете его снова, для холста, с указанным "crossorigin", браузер использует кешированную версию, doesn 'видеть необходимые заголовки и вызывает ошибку CORS. Когда вы добавляете '? _' К URL-адресу, браузер игнорирует кеш, так как это еще один URL-адрес. Взгляните на эту тему: https://bugs.chromium.org/p/chromium/issues/detail?id=409090

У Firefox и других браузеров нет этой проблемы.

Ответ 2

Какие настройки CORS вы применяете? Этот пост предполагает, что подстановочные знаки в AllowedOrigin анализируются (а не передаются дословно, это похоже на недокументированное поведение); и значение заголовка Access-Control-Allow-Origin затем кэшируется для последующих запросов, вызывая проблемы, похожие на то, что вы сообщаете.