HTML2Canvas с CORS в S3 и CloudFront

У меня проблема, и я совершенно отчаялся...:(

Я использую HTML2Canvas для создания скриншота div с большим количеством содержимого.

Я прочитал много похожих вопросов: Вопрос 1 и Вопрос2, и нашел еще один, очень похожий на мою проблему:

Политика CORS для кэшированного образа

В Firefox все работает нормально, но в Chrome у меня проблемы с CORS. У меня есть эта ошибка:

Изображение из источника ' http://files.domain.ly/' заблокировано для загрузки политикой совместного использования ресурсов Cross-Origin: в запрошенном ресурсе отсутствует заголовок 'Access-Control-Allow-Origin'. Поэтому происхождение ' http://localhost:58943/' не разрешено.

Я настроил CORS таким образом в моем S3 Bucket:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
    <CORSRule>
        <AllowedOrigin>localhost</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
    <CORSRule>
        <AllowedOrigin>localhost:58943</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
    <CORSRule>
        <AllowedOrigin>files.domain.ly</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

Files.domain.ly - это CNAME CloudFront.

Код HTML2Canvas:

html2canvas(document.getElementById('zoom_container'), {
  useCORS: true
}).then(function (canvas) {
  canvas.id = "image_canvas_render";
  document.body.appendChild(canvas);
  var img = canvas.toDataURL();
  img.id = "image_render_canvas";
});

Почему он работает в Firefox, а не в Chrome или Safari?

Файлы в S3 являются общедоступными, и я могу получить прямой доступ через любой веб-браузер без каких-либо проблем.

Я пробовал с атрибутом crossorigin="anonymous" в теге img, но он не работает.

Огромное спасибо!!

Отредактировано: иногда это работает, а иногда нет... проблема с кешем?

0 ответов

Другие вопросы по тегам