Amazon S3 CORS

Question

Amazon S3 CORS

Closed this issue 8 years ago · 9 comments

Hi!

I'm having an error using this library with Amazon S3. If I want to use the directive with an url from Amazon S3 it gives me this error :

Image from origin 'https://MY_S3_BUCKET.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://localhost:8000' is therefore not allowed access.

In this bucket, I've allowed CORS for everything and it still doesn't work.

Anyone ever had this problem ? Thank you!

Answer 1 · 2016-09-05T20:24:41.000Z

Amazon is the origin, so the request header should be allowed there not on your localhost

Answer 2 · 2016-09-05T20:32:42.000Z

@rickerd Do you have any example? Does the CORS need to be enable server side? Or I need to do some setup in my Angularjs app?

Thank you again!

Answer 3 · 2016-09-05T21:11:38.000Z

Is this because the library is using Canvas and this is the problem?

Answer 4 · 2016-09-05T21:24:16.000Z

You can access to your image via web browser url? Try also anonymous browser.

Answer 5 · 2016-09-07T20:14:34.000Z

Closing since the issue is not in the library.
Please see Gitter to get a helping hand.

Answer 6 · 2016-09-21T06:44:57.000Z

I'm having the same issue with an amazon S3 bucket as well.
When I try to access the image in an incognito chrome window the image is loading properly.
So I assume the error is from the library.

Answer 7 · 2016-09-21T07:03:25.000Z

Are you sure that the headers are correct?
Loading An image trough a browser or in the cropper is different.

Answer 8 · 2016-09-21T07:07:04.000Z

Hi @rickerd , which headers are you talking about?

Here is a sample of my code:

<img-crop image="fileInfo.url" result-image="myCroppedImage"></img-crop>

fileInfo.url is a amazon s3 url that looks something like this:
https://s3-ap-southeast-2.amazonaws.com/myhost.com/foo/bar/58131/1474440992/original/my_pic.jpg?1474440992

This is loading fine in a browser window.

Answer 9 · 2016-09-23T01:00:04.000Z

This plugin is performing a "getImageData" javascript call. I did my homework and from what I understand, by default, that call doesn't allow CORS because it could potentially be used to show images from the hard-drive of the users. That is why if the resource headers don't explicitly allow CORS that error will be thrown. In my scenario, the resource is loaded from our amazon S3 server, so I've reconfigured the header of amazon S3 to explicitly allow CORS and now it is working like a charm.

Here is the most relevant stackoverflow I could find: http://stackoverflow.com/questions/4672643/html5-canvas-getimagedata-and-same-origin-policy

Here is the config I've pushed to my amazon S3 server:

<CORSConfiguration>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>

see: http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html#how-do-i-enable-cors