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

Прежде всего, причина междоменной проблемы html2canvas заключается в том, что мы хотим визуализировать HTML в холст, а затем преобразовать его в изображение. Для этого требуется загрузить ресурсы в HTML во временный холст. из другого источника, чем текущая страница, она будет заблокирована холстом. Отказ в загрузке из-за загрязнения. Это настройка, сделанная браузером по соображениям безопасности.

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

Access-Control-Allow-Origin: https://aaa.bbb.com
Access-Control-Allow-Methods: POST, GET, PUT, DELETE

Некоторые из тех, что есть в Интернете, не нужны:

Access-Control-Expose-Headers: 
Access-Control-Allow-Credentials: true

В качестве объяснения возьмите кросс-доменность Alibaba Cloud OSS. В базовых настройках бэкэнда Alibaba Cloud OSS мы можем добавить междоменные настройки. 来源:http://aaa.bbb.com METHODS: GET,POST (Если только для отображения изображений Просто ПОЛУЧИТЕ) Разрешить заголовки и раскрыть заголовки можно оставить пустыми. Оставьте время кэша пустым или напишите число в секундах.

После настройки обычная междоменная загрузка и междоменный доступ к изображениям будут работать нормально. (Например, загрузка JSSDK от Alibaba Cloud)

Но в части html2canvas мы по-прежнему сообщаем о междоменных проблемах. Причина здесь в том, что мы не отправили параметр источника при доступе к междоменным изображениям. Этот параметр происхождения необходим в списке источников, который мы только что разрешили в фоновом режиме.

Мы можем добавить источник изображений или других ресурсов непосредственно в элемент или через js.

<img src="......." crossorigin="https://aaa.bbb.com" > <!-- Изображения будут отправлены из междоменных источников. -->

// var img = new Image();  
// var img = document.querySelector('img');
img.src = "......"; // Адрес изображения
img.crossOrigin = "https://aaa.bbb.com"; // Перекрестное происхождение

В это время мы проверяем сетевой запрос через инструменты разработчика браузера и видим, что в запросе есть один элемент: Origin: https://aaa.bbb.com

На этом этапе междоменные проблемы точно решены.