Атрибут crossorigin: режим загрузки междоменных ресурсов
Crossorigin задаёт CORS-настройки загрузки для поддерживаемых элементов. Он нужен, когда важно не только показать ресурс, но и получить разрешённый доступ к его данным или согласовать режим запроса.
Назначение
Crossorigin задаёт CORS-настройки загрузки для поддерживаемых элементов. Он нужен, когда важно не только показать ресурс, но и получить разрешённый доступ к его данным или согласовать режим запроса.
Как это работает
Anonymous обычно исключает учётные данные при междоменной загрузке, сохраняя правила same-origin для своего источника. Сервер ресурса должен вернуть подходящие CORS-заголовки. Ниже пример для собственного тестового сервера, а не готовая внешняя ссылка.
Пример
<!-- Разместите diagram.png на своём тестовом сервере. -->
<img src="diagram.png" crossorigin="anonymous" alt="Схема учебного документа" width="640" height="360">Что должно получиться
При корректной настройке ресурс загружается в выбранном режиме. Разница особенно важна при дальнейшем использовании изображения в canvas: разрешение доступа к пикселям определяется не одним HTML-атрибутом.
Граница применения и частая ошибка
Добавление crossorigin не обходит CORS. Для чужого сервера без нужного разрешения загрузка в CORS-режиме может завершиться отказом. Use-credentials требует отдельного согласования учётных данных и не должно назначаться всем ресурсам по умолчанию.
Самостоятельная проверка
На двух собственных тестовых origin сравните запросы с атрибутом и без него. Изучите Origin и ответ Access-Control-Allow-Origin. Не ослабляйте CORS рабочего сервера глобально ради одного учебного изображения.