search

jofftiquez / vue-croppie

Vue wrapper for croppie
https://jofftiquez.github.io/vue-croppie/
MIT License
260 stars 42 forks source link

Access image from aws result in a CORS error #80

Open pepeloper opened 4 years ago

pepeloper commented 4 years ago

👋 Hey! I've been getting a cors error when try to load a imagen from aws. I found a related issue with a proper solution on the croppie library itself https://github.com/Foliotek/Croppie/issues/516 but I don't know how to make it fit here.

If we can find out any workaround I will try to help with a PR

jofftiquez commented 4 years ago

Hello @pepeloper thanks for the issue. I'll look into this, no promises tho. I've been super busy with work lately. I'd appreciate if you could come up with a PR. Thank you so much! Stay safe.

roenfeldt commented 3 years ago

In case anybody needs a solution to this problem: it's not related to the library, but rather to how AWS is handling the incoming HTTP requests to the stored images. You need to set up the CORS policy at the bucket level on your AWS S3 Management Console. Choose your bucket, click the Permissions tab, and then scroll all the way down to the Cross-origin resource sharing (CORS) panel.

In there, click the Edit button to the right, and create your JSON configuration. Here's an example of how I'm handling such a scenario. YMMV

[ { "AllowedHeaders": [ "*" ], "AllowedMethods": [ "GET", "PUT", "POST", "DELETE" ], "AllowedOrigins": [ "http://dev.test", "https://example.com" ], "ExposeHeaders": [] }, { "AllowedHeaders": [ "*" ], "AllowedMethods": [ "GET" ], "AllowedOrigins": [ "http://dev.test", "https://example.com", "https://www.example.com" ], "ExposeHeaders": [] } ]

It should go without saying, but I'll point it out nevertheless. This won't work unless your bucket has public access enabled.

Hope this helps.