Bild gespeichert mit Amazon S3-Bucket, der nicht auf HTML5-Canvas angezeigt wird. Crossorigin Ausgabe

Question

Ich habe ein Bild in meinem AWS S3-Bucket gespeichert. Dies ist meine CORS-Konfiguration:

<CORSConfiguration> 
    <CORSRule> 
     <AllowedOrigin>*</AllowedOrigin> 
     <AllowedMethod>GET</AllowedMethod> 
     <MaxAgeSeconds>3000</MaxAgeSeconds> 
     <AllowedHeader>Authorization</AllowedHeader> 
    </CORSRule> 
</CORSConfiguration> 

Auch die Eimer diese Politik hat:

{ 
    "Version": "2012-10-17", 
    "Id": "Policy1468082822770", 
    "Statement": [ 
     { 
      "Sid": "Stmt1468082812651", 
      "Effect": "Allow", 
      "Principal": "*", 
      "Action": "s3:GetObject", 
      "Resource": "arn:aws:s3:::criptolibertad/*" 
     } 
    ] 
} 

Dies ist das Bild: https://criptolibertad.s3.amazonaws.com/Django/0_startproject.jpeg, wie Sie sehen können, es ist öffentlich. Ich benutze eine Bibliothek namens Croppie, die versucht, das Bild in eine Leinwand zu laden. Aber die Leinwand zeigt das Bild nicht, ich weiß nicht warum. Die js sieht wie folgt aus:

croppie_div.croppie('bind', { 
    url: "{{ carta_magicpy.imagen_base.url }}", 
    points: [10,10,300,600] 
}); 

Das url Attribut ist nur eine Variable von Django gemacht. Es sieht so aus, wenn es gemacht wird:

<img style="opacity: 0;" src="https://criptolibertad.s3.amazonaws.com/Django/0_startproject.jpeg" crossorigin="anonymous" class="cr-image"> 

Beachten Sie die crossorigin Attribut. Ich ging in Croppies Quelle und entfernte dieses Attribut. Aber dann bekomme ich den Fehler:

Image from origin ... has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

Wie kann ich das lösen?

Answer 1

Scheint, dass die CORS-Header immer noch nicht richtig eingestellt sind. Diese erwähnt, dass Sie dies überprüfen können, indem Sie auf die Antwortheader schauen.

Es ist pretty easy to inspect the headers with curl, für das Bild in Ihrem Eimer gespeichert:

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: CD4E7C50B5186192 
Date: Fri, 15 Jul 2016 07:54:52 GMT 
Last-Modified: Sat, 09 Jul 2016 05:13:33 GMT 
ETag: "5733f7cd0187eb3a840bbe83e2c66a9b" 
Accept-Ranges: bytes 
Content-Type: image/jpeg 
Content-Length: 33402 
Server: AmazonS3 

Als CORS Gegensatz Header auf zB Imgur den korrekt gesetzt ist:

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 GMT 
ETag: "7b01be4b9235542038f6d9793cc2c620" 
Content-Type: image/jpeg 
Fastly-Debug-Digest: f94b623450bb8143aff369600bf855d6332bb44c12070f02b0fc95648eac6ef3 
cache-control: public, max-age=31536000 
Content-Length: 2457350 
Accept-Ranges: bytes 
Date: Fri, 15 Jul 2016 07:55:15 GMT 
Age: 277937 
Connection: keep-alive 
X-Served-By: cache-iad2131-IAD, cache-fra1232-FRA 
X-Cache: HIT, HIT 
X-Cache-Hits: 1, 1 
X-Timer: S1468569315.725739,VS0,VE2 
Access-Control-Allow-Methods: GET, OPTIONS 
Access-Control-Allow-Origin: * 
Server: cat factory 1.0 

Wie Sie die Hauptunterschied ist zu sehen Das imgur gibt die Header Access-Control-Allow-Methods und Access-Control-Allow-Origin zurück, während Ihr S3-Bucket nicht.

Ich habe die official Amazon documentation on the subject verfolgt und die modified CORS configuration auf meine eigene Bucket angewendet, der Unterschied zu Ihrer Konfiguration ist , die die Header als Antwort zulässig definiert. Ich habe meinen Eimer:

<AllowedHeader>*</AllowedHeader> 

Hier sind die resultierenden Header auf dem Bild in meinem Eimer gespeichert:

curl -I -H "Origin: https://stackoverflow.com/questions/38365182" -H "Access-Control-Request-Method: GET" https://so38134984.s3.amazonaws.com/rainbow_dash.png 
HTTP/1.1 200 OK 
x-amz-id-2: ANxPKoL3JDsLDGerTf8gdcyRU7U4Ozg4eMYJ9ADlX/2qcBmx0dsmAbZxv2h/tFfQIXbkAs+x5iA= 
x-amz-request-id: 737E30AE2F8634FC 
Date: Fri, 15 Jul 2016 07:53:55 GMT 
Access-Control-Allow-Origin: * 
Access-Control-Allow-Methods: GET 
Access-Control-Max-Age: 3000 
Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method 
Last-Modified: Mon, 04 Jul 2016 20:09:19 GMT 
ETag: "3ad1bb64b913c2eadab216b96034b990" 
Accept-Ranges: bytes 
Content-Type: image/png 
Content-Length: 148647 
Server: AmazonS3 

ich mein Bild nehme nun richtig in Ihrem Croppie Skript arbeiten.