Image Saved Con Amazon S3 Bucket Not Showing On Html5 Canvas. Crossorigin Issue

I have an image saved on my AWS S3 bucket. This is my CORS configuration: *

Solution 1:

Seems the CORS headers are still not set correctly. This related Croppie issue #119 mentions you can check that by looking at the response headers.

It's pretty easy to inspect the headers with curl, for the image stored in your bucket:

curl -I -H "Origin: https://stackoverflow.com/questions/38365182" -H "Access-Control-Request-Method: GET" https://criptolibertad.s3.amazonaws.com/Django/0_startproject.jpeg
HTTP/1.1 200 OK
x-amz-id-2: 9AaMwS9s2Im+OV6YlzVKrDW8RnbQqFt4Ygc+pRa3XM4iDmnJqlO8DQ7EjvpT4W4GnhGc0IvoQeI=x-amz-request-id: CD4E7C50B5186192Date: Fri, 15 Jul 2016 07:54:52 GMTLast-Modified: Sat, 09 Jul 2016 05:13:33 GMTETag: "5733f7cd0187eb3a840bbe83e2c66a9b"Accept-Ranges: bytesContent-Type: image/jpegContent-Length: 33402Server: AmazonS3

As opposed to the properly set up CORS headers on e.g imgur:

curl -I -H "Origin: https://stackoverflow.com/questions/38365182" -H "Access-Control-Request-Method: GET" http://i.imgur.com/HMf7XWD.jpg
HTTP/1.1 200 OK
Last-Modified: Wed, 06 Jul 2016 15:07:13 GMTETag: "7b01be4b9235542038f6d9793cc2c620"Content-Type: image/jpegFastly-Debug-Digest: f94b623450bb8143aff369600bf855d6332bb44c12070f02b0fc95648eac6ef3cache-control: public, max-age=31536000Content-Length: 2457350Accept-Ranges: bytesDate: Fri, 15 Jul 2016 07:55:15 GMTAge: 277937Connection: keep-aliveX-Served-By: cache-iad2131-IAD, cache-fra1232-FRAX-Cache: HIT, HITX-Cache-Hits: 1, 1X-Timer: S1468569315.725739,VS0,VE2Access-Control-Allow-Methods: GET, OPTIONSAccess-Control-Allow-Origin: *Server: cat factory 1.0

As you can see the main difference is that imgur returns the headers Access-Control-Allow-Methods and Access-Control-Allow-Origin, while your S3 bucket does not.

I have followed the official Amazon documentation on the subject and applied the modified CORS configuration to my own bucket, the difference from your configuration is the AllowedHeader element, which defines the headers to allowed in response. I set my bucket to:

<AllowedHeader>*</AllowedHeader>

Here are the resulting headers on the image stored in my bucket:

curl-I-H"Origin: https://stackoverflow.com/questions/38365182"-H"Access-Control-Request-Method: GET"https://so38134984.s3.amazonaws.com/rainbow_dash.pngHTTP/1.1200OKx-amz-id-2:ANxPKoL3JDsLDGerTf8gdcyRU7U4Ozg4eMYJ9ADlX/2qcBmx0dsmAbZxv2h/tFfQIXbkAs+x5iA=x-amz-request-id:737E30AE2F8634FCDate:Fri,15Jul2016 07:53:55 GMTAccess-Control-Allow-Origin:*Access-Control-Allow-Methods:GETAccess-Control-Max-Age:3000Vary:Origin,Access-Control-Request-Headers,Access-Control-Request-MethodLast-Modified:Mon,04Jul2016 20:09:19 GMTETag:"3ad1bb64b913c2eadab216b96034b990"Accept-Ranges:bytesContent-Type:image/pngContent-Length:148647Server:AmazonS3

I assume my image will now work properly in your Croppie script.