crossorigin assets loading problem (amazon s3)

[neon]

Hi all,

 

I want to store my assets on amazon s3 but have some problems loading them.

 

Here is an example:

 

http://jsfiddle.net/94hYJ/2/

 

This works fine in Firefox 29 but when I try it in Chrome 34 (My main development browser) I get this error:

Image from origin 'http://s3.amazonaws.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'xyz' is therefore not allowed access. 

The crossOrigin flag is set to 'anonymous' and the CORS entries are made on S3. It works perfect in FF and even IE. If I load the image in preload function it also works in Chrome but I need to load assets dynamically and so can't use preload function. Loading them dynamically with load function works perfect on local assets. So the workflow shouldn't be the problem.

 

Does anyone have experience with crossorigin asset loading or have an idea how i can solve the error?

 

Thanks!

[Videlais]

To start to solve this, the first thing you need to know is that Chrome is actually doing things correctly. Both Firefox and IE are very lax in their CORS policies and will often allow cross-domain image loading with the CANVAS. They definitely shouldn't, but they do anyway. (This is also why the local loading works too. Firefox and IE will even load "file://" protocol images sometimes and they definitely shouldn't do that at all.)

 

So, the thing to check, then, is the "crossdomain.xml" file on S3. Is there a 'Access-Control-Allow-Origin' property in the file? If so, does it allow the domain you are trying from? It reads as if you just need to adjust some settings and it should work on the domain you need.