Cross Origin amazon S3 not working using chrome

Question

Our website is having a problem, with chrome, loading images from amazon S3 with crossOrigin attribute setted on "Anonymous".

Our S3 server is setted with:

`

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>HEAD</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <ExposeHeader>x-amz-server-side-encryption</ExposeHeader>
        <ExposeHeader>x-amz-request-id</ExposeHeader>
        <ExposeHeader>x-amz-id-2</ExposeHeader>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

`

I'm using canvg.js in order to create a canvas from an SVG having remote images (on amazon S3 server) but chrome browser returns me "No 'Access-Control-Allow-Origin' header is present on the requested resource." error after executed this code:

 this.img = document.createElement('img');
            var self = this;
            this.img.onload = function() { self.loaded = true; }
            this.img.onerror = function() { if (typeof(console) != 'undefined')                                            
            console.log('ERROR: image "' + href + '" not found'); self.loaded = true; } }
            if (svg.opts['useCORS'] == true) { 
                                this.img.crossOrigin = 'Anonymous'; }
            this.img.src = href;

In firefox and IE this doesn't cause any issue.

Answer 1

This is an issue with Chrome caching requests. Here is a discussion on the topic.

Simply add the following to all HTML tags where you are trying to access resources from a different domain crossorigin="anonymous" as documented by MDN here.