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

Прежде всего, причина междоменной проблемы 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

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