Настройки CORS для изображений в холсте

Я пытаюсь использовать Caman.js и загружать изображения с Amazon S3. Caman.js - это библиотека JS для создания эффектов изображения, и она работает, создавая копию изображения на объект холста и делая различные манипуляции с пикселями для данных. Похоже, что на холсте есть некоторые сведения о безопасности, чтобы ограничить способность javascript получать доступ к данным о пикселях, когда эти данные поступают с внешнего сервера, если только этот сервер не передает некоторые учетные данные безопасности в запросе или совместное использование ресурсов Cross-Origin (CORS).

Я никогда раньше не встречался с CORS, я пытаюсь узнать об этом, но я не могу заставить эту работу работать. Из того, что я могу понять, чтобы избежать этой ошибки, которая появляется в Chrome:

Unable to get image data from canvas because the canvas has been tainted by cross-origin data.
Uncaught Error: SECURITY_ERR: DOM Exception 18

Вам нужно установить файл CORS на ведро Amazon. Здесь файл CORS, который я использую:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>HEAD</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

Это не имеет никакого эффекта. Являются ли эти файлы CORS кэшированными Amazon или я должен ожидать, что он вступит в силу немедленно? - update: я пробовал через 8 часов и все еще не работает, поэтому я предполагаю, что кэширование не является проблемой.

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

Спасибо! Кевин

Обновление: здесь заголовки ответов я получаю от запроса изображения к Amazon:

Date:Thu, 18 Oct 2012 04:52:40 GMT
ETag:"9848ce610c994521295d8aa38b47bab9"
Last-Modified:Thu, 18 Oct 2012 04:19:45 GMT
Server:AmazonS3
x-amz-id-2:Govue0tJg5MLYedr/l7T2RU5RApXLZBwJ8p507hS+sLGqxYojRnVKqj4jRHRZsZ6
x-amz-request-id:F4FF5B669C3156D2

Ответ 1

Несмотря на то, что этот вопрос составляет 4 месяца, я хотел бы помочь другим, которые извлекли проблемы S3, CORS и HTML canvas, указав здесь ссылку на рабочее решение.

Amazon S3 отправит заголовки Cross-Origin только в случае явного запроса (см. спецификации CORS). Это означает, что клиент должен запрашивать их явно в HTTP-запросе. Ожидаемое поведение заключается в том, что клиент укажет имя хоста внутри заголовка "Origin: host-name" в запросе, и сервер проверит, должен ли он совместно использовать ресурсы с определенным именем происхождения, Что важно понимать здесь, если ваш клиент является веб-браузером, он не отправит этот заголовок без причины.

Вот как работает запрос ajax для кросс-домена. Недавно добавлена поддержка для некоторых других ресурсов, таких как шрифты и изображения.

Изображения: HTML5 добавлена поддержка Cross-Origin для изображений в тегах HTML и Javascript... Используйте атрибут crossOrigin на изображениях, и браузер получит ресурс в качестве ресурса Cross-Origin (он добавит Origin для HTTP-запроса) ссылка на исходное сообщение.

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

подробнее о MDN

я также выбрал подобную проблему, если вы можете полагаться на поддержку HTML5 на стороне клиента, используйте это решение!