10

I have a problem and I'm totally desperate... :(

I'm using HTML2Canvas to create a screenshot of a div with many contents.

I have read many similar questions: Question 1 and Question2, and I have found another one very similar to my problem:

CORS policy on cached Image

In Firefox, all is working fine, but in Chrome, I'm having problems with the CORS. I have this error:

Image from origin 'http://files.domain.ly' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:58943' is therefore not allowed access.

I have configured the CORS on this way in my 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>

The files.domain.ly is the CNAME of the CloudFront.

The HTML2Canvas code:

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";
});

Why it's working on Firefox but not in Chrome or Safari?

The files in the S3 are public and I can access directly throught any web explorer without any problem.

I have tried with attribute crossorigin="anonymous" in img tag, but it's not working.

Thank you so much!!

Edited: Sometimes it's working, and sometimes no... cache problem?

n1stre
  • 5,856
  • 4
  • 20
  • 41
chemitaxis
  • 13,889
  • 17
  • 74
  • 125
  • Any luck? I am facing a very similar issue with some files.... – Kshitiz Mar 19 '15 at 14:58
  • Yes @KshitizShankar adding a random string to the url of the image solved my problem... It's a problem with cache... Did you solved it on other way? Thanks!! – chemitaxis Jun 25 '15 at 15:20
  • No, I am using the query string method as well to resolve it... hopefully there would be a better way to do it in the future... – Kshitiz Jul 01 '15 at 10:40

0 Answers0