Получить сообщение об ошибке для загруженного img

Question

У меня есть функция, ожидающая события загрузки или ошибки для тега img. Иногда я получаю событие с ошибкой, а тег img имеет естественную ширину и естественный вес, равный нулю. Странно, что, глядя на вкладку сети в инструментах разработчика Chrome, код состояния для запроса изображения был 302, а перенаправленный запрос возвратился в порядке с статусом 200. (Фактическое изображение хранится на S3, но наш сервер перенаправляет туда).

Кроме того, в вопросе фактически отображаются, но не правильно, потому что я использую naturalWidth и naturalHeight для вычисления некоторых свойств CSS для изображения.

У меня также появилась ошибка, говорящая о том, что «загрузка изображения с использованием кросс-оригинала запрещена политикой совместного использования ресурсов Cross-Origin». Я не уверен, что это связано, или если он даже ссылается на один и тот же образ.

Я особенно смущен, потому что это происходит только для первого изображения в серии, и это случается только иногда.

Кто-нибудь знает, что происходит, или, по крайней мере, как выяснить, что вызывает событие ошибки?

UPDATE:

S3 ведро и сервер Перенаправление оба настроены на поддержку CORS. Однако оказывается, что всякий раз, когда это происходит, браузер использует кэшированное изображение, которое не имеет заголовка Access-Control-Allow-Origin. Я считаю, что происходит то, что раньше в приложении мы запрашиваем изображение без использования CORS и, следовательно, не имеем заголовков, то на этом этапе мы используем CORS, но мы попадаем в кешированную версию, которая не была получена с помощью CORS , Я все еще не знаю, как решить эту проблему. И я не уверен на 100%, что это то, что происходит, хотя я уверен, что он имеет какое-то отношение к кешированию и запросам перекрестного происхождения.

Я также все еще смущен тем, почему я получаю как ошибки, так и события загрузки для одного и того же тега img, и изображение на самом деле отображается. Кроме того, несмотря на то, что вызывается обработчик события загрузки, this.complete является false и this.naturalWidth и this.naturalHeight равны нулю.

Answer 1

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

Я считаю, что вы найдете необходимую информацию здесь: http://aws.typepad.com/aws/2012/08/amazon-s3-cross-origin-resource-sharing.html

Надеется, что это помогает!

Answer 2

Из W3C спецификации кодов ответа HTTP:

---

10.3.3 302 Найдено

Запрошенный ресурс временно находится под другим URI. Так как перенаправление может быть иногда изменено, клиент ДОЛЖЕН продолжать использовать Request-URI для будущих запросов. Этот ответ может быть только кэшируемым, если указано полем Cache-Control или Expires.

Временное URI ДОЛЖНО указываться полем «Местоположение» в ответе. Если метод запроса не был HEAD, сущность ответа СЛЕДУЕТ содержать короткую гипертекстовую ноту с гиперссылкой на новый URI (ы).

---

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

Политика перекрестного происхождения - это то, что реализовано в более безопасных браузерах (современный Chrome и многие другие) и более защищенных профилях Javascript (например, ES5).

Эта политика рассматривает междоменные запросы опасными, даже если вы просто хотите загрузить изображение. Вот один из многих примеров: exploit cross-domain image loading