CORS on canvas not working on Chrome and Safari

Question

I'm trying to display images on a canvas. The images are hosted on S3.

CORS is set up on AWS, and the CrossOrigin attribute is set to anonymous in the script.

Everything works fine on Firefox — but images are not being loaded on Chrome and Safari.

Errors Safari:

Origin https://www.example.com is not allowed by Access-Control-Allow-Origin. http://mybucket.s3.amazonaws.com/bubble/foo.PNG

[Error] Failed to load resource: Origin https://www.example.com is not allowed by Access-Control-Allow-Origin. (foo.PNG, line 0)

Cross-origin image load denied by Cross-Origin Resource Sharing policy.

Errors Chrome:

Access to Image at 'https://mybucket.s3.amazonaws.com/bubble/foo.PNG' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

The CORS configuration is pretty standard. I tried <AllowedOrigin>*</AllowedOrigin>, and a couple of other variations, but it didn't make any difference … with one exception: <AllowedOrigin>null</AllowedOrigin> seemed to work for Chrome.

CORS configuration on AWS

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>https://www.example.com</AllowedOrigin>
    <AllowedOrigin>http://www.example.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>

Canvas Script

let myImage = new Image();
myImage.setAttribute('crossOrigin', 'anonymous');

myImage.src = thisDocument.url;
myImage.onload = function() {
  canvas = document.getElementById('myCanvas');
  context = canvas.getContext('2d');

  canvas.setAttribute('width', 200);
  canvas.setAttribute('height', 200);

  context.fillStyle = hsl(0, 50%, 50%);
  context.fillRect(0, 0, 120, 120);
  context.drawImage(myImage, 12, 12, 60, 60);
};

Answer 1

I had a very similar issue to this (using S3 hosting with Access-Control errors on Safari and Chrome).

It ended up being a caching issue specific to Chrome and Safari. If you load an image via CSS or an <img> tag, the image will be cached without the Access-Control-Allow-Origin header.

You can check if this is the case for you by disabling caching and checking if the error persists. If it is the issue this answer will likely help: Refresh image with a new one at the same url