CORS AWS S3 und Cloudfront

Question

Ich sehe verschiedene Header vom Server mit Curl und Browsern (FF und Chrome) zurückgegeben.

Locke kehrt CORS-Header

curl -X GET -I -H "Origin: https://qa.gameofshred.com" https://s3-ap-southeast-1.amazonaws.com/gameofshred-qa/site/fontawesome-webfont.912ec66d7572ff821749.svg --verbose 

> GET /gameofshred-qa/site/fontawesome-webfont.912ec66d7572ff821749.svg HTTP/1.1 
> User-Agent: curl/7.29.0 
> Host: s3-ap-southeast-1.amazonaws.com 
> Accept: */* 
> Origin: https://qa.gameofshred.com 
> 
< HTTP/1.1 200 OK 
HTTP/1.1 200 OK 
< x-amz-id-2: m9oDqyGs0K+0IBnygQlGE9IEeVZQcpIf1nYSWYYu5NU5Hu3gNEUy8SfWnO/mFiK8nPIBPlDhWec= 
x-amz-id-2: m9oDqyGs0K+0IBnygQlGE9IEeVZQcpIf1nYSWYYu5NU5Hu3gNEUy8SfWnO/mFiK8nPIBPlDhWec= 
< x-amz-request-id: 135C9D56C2C0D604 
x-amz-request-id: 135C9D56C2C0D604 
< Date: Wed, 19 Apr 2017 02:37:34 GMT 
Date: Wed, 19 Apr 2017 02:37:34 GMT 
< Access-Control-Allow-Origin: * 
Access-Control-Allow-Origin: * 
< Access-Control-Allow-Methods: GET 
Access-Control-Allow-Methods: GET 
< Access-Control-Max-Age: 3000 
Access-Control-Max-Age: 3000 
< Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method 
Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method 
< Last-Modified: Tue, 18 Apr 2017 23:02:06 GMT 
Last-Modified: Tue, 18 Apr 2017 23:02:06 GMT 
< ETag: "912ec66d7572ff821749319396470bde" 
ETag: "912ec66d7572ff821749319396470bde" 
< Accept-Ranges: bytes 
Accept-Ranges: bytes 
< Content-Type: image/svg+xml 
Content-Type: image/svg+xml 
< Content-Length: 444379 
Content-Length: 444379 
< Server: AmazonS3 
Server: AmazonS3 

Browser auf der anderen Seite keine CORS-Header enthalten.

Anfrage:

GET /gameofshred-qa/site/fontawesome-webfont.912ec66d7572ff821749.svg HTTP/1.1 
Host: s3-ap-southeast-1.amazonaws.com 
Origin: https://qa.gameofshred.com 
Accept: */* 
User-Agent: curl/7.29.0 
Cache-Control: no-cache 

Antwort:

Accept-Ranges → bytes 
Content-Length → 444379 
Content-Type → image/svg+xml 
Date → Wed, 19 Apr 2017 02:32:37 GMT 
ETag → "912ec66d7572ff821749319396470bde" 
Last-Modified → Tue, 18 Apr 2017 23:02:06 GMT 
Server → AmazonS3 
x-amz-id-2 → O0V/q2q9vSKQgJWKUL8LfsQghKlyBS90fTYDt9TLcgJimjeCUKg57+UwgAnWym8tJRPpGsRutG0= 
x-amz-request-id → 5EA7299EC61D0E86 

Jede Erklärung? Vielen Dank.

UPD: Wie vorgeschlagen wurde ich aktualisiert Cors-Konfiguration. Das Problem offenbar von zwei Gründen 1) CDN-Caching 2) Mit Postman zur Überprüfung CORS verursacht wurde: Es hat nicht

<?xml version="1.0" encoding="UTF-8"?> 
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> 
<CORSRule> 
    <AllowedOrigin>*</AllowedOrigin> 
    <AllowedMethod>GET</AllowedMethod> 
    <AllowedMethod>HEAD</AllowedMethod> 
    <MaxAgeSeconds>55</MaxAgeSeconds> 
    <AllowedHeader>Authorization</AllowedHeader> 
</CORSRule> 
</CORSConfiguration> 

UPD 2 helfen. Postman (Browser-Version) ersetzt ORIGIN immer durch etwas wie "chrome: // extensions ....", so dass wir es nicht zum Testen verwenden können.

Answer 1

Versuchen Zugabe: <AllowedMethod>HEAD</AllowedMethod> zu CORS Konfiguration in AWS S3:

Bucket> Berechtigungen> CORS Konfiguration

<?xml version="1.0" encoding="UTF-8"?> 
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> 
<CORSRule> 
    <AllowedOrigin>*</AllowedOrigin> 
    <AllowedMethod>GET</AllowedMethod> 
    <AllowedMethod>HEAD</AllowedMethod> 
    <MaxAgeSeconds>3000</MaxAgeSeconds> 
    <AllowedHeader>Authorization</AllowedHeader> 
</CORSRule> 
</CORSConfiguration> 

Dann sollten Sie in Browsern & curl sehen:

Access-Control-Allow-Origin: * 
Access-Control-Allow-Methods: GET, HEAD 
Access-Control-Max-Age: 3000 

Answer 2

Browser don Wenn Sie direkt zu https://s3-ap-southeast-1.amazonaws.com/gameofshred-qa/site/fontawesome-webfont.912ec66d7572ff821749.svg navigieren, senden Sie keine Origin Kopfzeile. Wenn Sie eine Anfrage mit XHR/Fetch senden, sendet Ihr Browser den Header Origin. Und wenn eine Anfrage den Header Origin enthält, ist dieser Server so eingestellt, dass er sendet - und weil dies der Fall ist, lässt der Browser Ihren Frontend-Code auf die Antwort zugreifen.

fetch("https://s3-ap-southeast-1.amazonaws.com/gameofshred-qa/site/fontawesome-webfont.912ec66d7572ff821749.svg") 
 
    .then(response => response.text()) 
 
    .then(svg => document.querySelector("xmp").innerHTML = svg);

<xmp></xmp>

das ist also, warum, wenn Sie https://s3-ap-southeast-1.amazonaws.com/gameofshred-qa/site/fontawesome-webfont.912ec66d7572ff821749.svg direkt in Ihrem Browser navigieren und dann auf die Antwort-Header betrachten, werden Sie nicht die Access-Control-Allow-Origin Antwort-Header sehen.

Aber Ihr Frontend-JavaScript-Code wird es sehen, denn im Gegensatz zu dem Fall, dass Sie direkt dorthin navigieren, sendet der Browser die Origin Header für Anfragen, die Sie von Ihrem Frontend-Code machen.

Das Konfigurieren eines Servers, der nur den Antwortkopf Access-Control-Allow-Origin sendet, wenn die Anforderung einen Header Origin enthält, ist eine ziemlich häufige Sache.Da dieser Server so konfiguriert ist, das ist, warum, wenn Sie eine Anfrage, um es mit curl oder was auch immer zu machen, werden Sie nur Access-Control-Allow-Origin in der Antwort von ihm bekommen, wenn Sie die Origin Request-Header senden:

# With no Origin request header sent: 

$ curl -X GET -I https://s3-ap-southeast-1.amazonaws.com/gameofshred-qa/site/fontawesome-webfont.912ec66d7572ff821749.svg 
HTTP/1.1 200 OK 
x-amz-id-2: S3LUW5kEWKv2SRLVATa14/oc4/agz81x2u/ICXXrzG37RzDTWJZB74MeW3g0OWG1Hx9BT09TOu0= 
x-amz-request-id: B15104B677AFC7AF 
Date: Wed, 19 Apr 2017 03:41:39 GMT 
Last-Modified: Tue, 18 Apr 2017 23:02:06 GMT 
ETag: "912ec66d7572ff821749319396470bde" 
Accept-Ranges: bytes 
Content-Type: image/svg+xml 
Content-Length: 444379 
Server: AmazonS3 

# With Origin request header sent: 

$ curl -X GET -I -H "Origin: https://qa.gameofshred.com" https://s3-ap-southeast-1.amazonaws.com/gameofshred-qa/site/fontawesome-webfont.912ec66d7572ff821749.svg 
HTTP/1.1 200 OK 
x-amz-id-2: /Lm0fHcXMR0/rY86wZDAfWqQ3Dhv1uW0TAkBdUltNltskXdiLjDS8H/lzgKHlglcCKZJHEdcoao= 
x-amz-request-id: 749F8CCD56060E92 
Date: Wed, 19 Apr 2017 03:40:00 GMT 
Access-Control-Allow-Origin: * 
Access-Control-Allow-Methods: GET, HEAD 
Access-Control-Max-Age: 3600 
Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method 
Last-Modified: Tue, 18 Apr 2017 23:02:06 GMT 
ETag: "912ec66d7572ff821749319396470bde" 
Accept-Ranges: bytes 
Content-Type: image/svg+xml 
Content-Length: 444379 
Server: AmazonS3