Canvas element with and Image loaded from aws s3 using cors does not work first couple loads

Question

So I have cors setup on my AWS S3 bucket:

<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
  </CORSRule>
</CORSConfiguration>

In my html

<div id="explain_canvas"></div>

In my javascript I am loading an image and placing it into a canvas image.

var outlineImage = new Image();
outlineImage.crossOrigin = '';
outlineImage.src = drawing_image;
outlineImage.onload = function() {
  var canvasDiv = document.getElementById('explain_canvas');
  var canvas = document.createElement('canvas');
  canvas.setAttribute('width', 722);
  canvas.setAttribute('height', 170);
  canvas.setAttribute('id', 'canvas_'+canvas_element);
  canvas.setAttribute('name', 'canvas_'+canvas_element);
  canvasDiv.appendChild(canvas);
  if(typeof G_vmlCanvasManager != 'undefined') {
    canvas = G_vmlCanvasManager.initElement(canvas);
  }
  var context = canvas.getContext("2d");
  context.drawImage(outlineImage, 10, 10, 600, 150);
}

I am loading the context like that to be compatible with internet explorer.

Here is my problem. When the page loads the first two times, it comes up with this error:

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

However, when I reload the page a couple times, it will eventually work and load the image. Once it is done, I am able to successfully call toDataURL() on the canvas element.

Does anyone know why this happens? Have I made a mistake? Is it an issue with AWS and I'll just have to wait for Amazon to fix the cors?

It is happening in all browsers I have tested. In Chrome, Firefox, Safari, IE. On my Mac, PC, and iPhone. So I don't think it is browser related. Also, it happens locally and in production.

Thanks!

Answer 1

Apparently the browsers are not sending an origin header in the request headers. And aws requires the origin be sent. I'm not sure why this would be the case. The origin header should get sent even with a simple HTTP request. Alas, it is not.

And here is the reason why the origin head was not getting sent.