Cross Origin Policy error

Question

I am reading images from S3 and i am using angularjs, when i open the page i am getting error

Image from origin 'https://feazt-static.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 'http://127.0.0.1:8000' is therefore not allowed access. 

When i reload the page again the images are loading properly.please help me.

The code i implemented:

$timeout(function() {
        var canvas = document.createElement("canvas");
        var context = canvas.getContext("2d");
        var img_obj = document.getElementById("img_file_"+index);
        img_obj.addEventListener('load', function() {
            canvas.width = this.width*2;
            canvas.height = this.height*2;
            context.drawImage(this, 0, 0, canvas.width, canvas.height);
            this.setAttribute("src",canvas.toDataURL()); 
        });
        img_obj.setAttribute('crossOrigin', 'anonymous');
        img_obj.setAttribute("src",arg);
    }, 2000);

Answer 1

You need to enable it on your bucket, then you're all good.

Follow the official amazon guide:

http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html