html5 - Javascript Image() missing `Origin` header when loading src -


having fun time canvas , particularly google chrome. right i'm loading image via javascript used in canvas wrapped easeljs. here's how i'm loading image (hosted on s3):

imageload: function(imageurl, imageid) {   var image = new image();   image.crossorigin = "anonymous";   image.imageid = imageid   image.onload = this.handleimageload;   image.src = imageurl; } 

images stored on amazon s3 bucket following cors properties:

<?xml version="1.0" encoding="utf-8"?> <corsconfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">     <corsrule>         <allowedorigin>*</allowedorigin>         <allowedmethod>get</allowedmethod>         <maxageseconds>1</maxageseconds>         <allowedheader>*</allowedheader>     </corsrule> </corsconfiguration> 

the problem

it appears browser not setting origin header when loading image above. particularly happens if image has been loaded outside of javascript , cached browser. - , here's gets weird - once second attempt made load image using javascript, cors security issues go away (and apparently browser sets origin header).

we've tested behavior multiple times, , confirmed setting server forces cors headers each response. appear browser not adding origin headers when asked explicitly.

the question

so given of information, can work around problem? can amazon cloudfront forced add cors headers? there problem image.crossorigin = "anonymous"?

the solution problem putting fastly cdn (http://fastly.com) in front of our s3 bucket. not-so-pretty way of doing things, able inject custom headers under "settings" section of our service.

this solution particular problem.


Comments

Popular posts from this blog

shopping cart - Page redirect not working PHP -

php - How to modify a menu to show sub-menus -

python - Installing PyDev in eclipse is failed -