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!

Can you include which browser(s) you are seeing this error in? You mention that you are "compatible with internet explorer", but not whether the error is happing in IE or some other browser. — monsur, Jan 06 '13 at 04:31
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. — bfcoder, Jan 06 '13 at 13:26

score 9 · Accepted Answer · edited May 23 '17 at 12:08

9

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.

edited May 23 '17 at 12:08

Community

1
1

answered Jan 09 '13 at 04:50

bfcoder

3,042
2
28
35

3

And [here](http://stackoverflow.com/questions/14228839/all-of-my-browsers-are-not-sending-the-origin-header) is the reason why the origin head was not getting sent. – bfcoder Jan 10 '13 at 14:49
This is so weird. I can get an image to load when the origin is NOT present. When it IS present that's when Safari (only safari) won't load the image because "Cross-origin image load denied by Cross-Origin Resource Sharing policy." – teewuane Sep 18 '14 at 21:24

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

1 Answers1

Linked