So I have cors setup on my AWS S3 bucket:

<CORSConfiguration xmlns="/">
  <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 patible with internet explorer.

Here is my problem. When the page loads the first two times, it es 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!

So I have cors setup on my AWS S3 bucket:

<CORSConfiguration xmlns="http://s3.amazonaws./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 patible with internet explorer.

Here is my problem. When the page loads the first two times, it es 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!

• javascript
• canvas
• cors

• Can you include which browser(s) you are seeing this error in? You mention that you are "patible with internet explorer", but not whether the error is happing in IE or some other browser. – monsur Commented Jan 6, 2013 at 4: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 Commented Jan 6, 2013 at 13:26

1 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.