Какие именно ограничения накладывает CORS при получении URL-адресов изображений с другого сайта?

Question

Предположим, если мой домен A и я хочу отобразить изображение из домена BI, это можно успешно сделать, поместив URL-адрес изображения из B в атрибут sr c тега img на моем веб-сайте и ожидайте, что изображение будет отображаться , Однако, когда я пытаюсь отобразить изображение на холсте и преобразовать его в base64 с помощью функции toDataUrl, я не могу этого сделать по причинам CORS.

Мои вопросы: как получилось отобразить изображение из домена B, если оно разрешает совместное использование ресурсов из разных источников? Нужно ли настраивать только заголовок HTTP в домене B, чтобы разрешить моему домену A доступ к ресурсу, или в домене A также необходимо активировать параметр?

Answer 1

Это только настройка заголовка HTTP в домене B, которая должна быть настроена для того, чтобы мой домен A мог получить доступ к ресурсу ...

Да, чтобы указать браузеру то, что это безопасно для исходного домена B, дает разрешение на использование изображения, например:

Access-Control-Allow-Origin: https://domaina.example

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

Домен A не нуждается в чем-то особенном, только код, используя данные изображения.

Полная информация в спецификации .

Answer 2

CORS не накладывает никаких ограничений. Одинаковая политика происхождения накладывает ограничения. CORS может удалить некоторые из них.

Нет ограничений на отображение изображений.

<img alt="" src="//cross-origin.example.com/foo.jpeg"> абсолютно нормально (хотя сайт может попытаться победить это, протестировав заголовок referer с кодом на стороне сервера).

По умолчанию JavaScript не имеет доступа к данным внутри изображения (например, , помещая изображение в <canvas>, а затем генерирование URL-адреса data:, из которого JavaScript мог бы затем перейти на сервер.

CORS может снять это ограничение с заголовком Access-Control-Allow-Origin.