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, но он не работает.
Огромное спасибо!!
Отредактировано: иногда это работает, а иногда нет... проблема с кешем?