2017-04-19 154 views
2

我看到使用curl和瀏覽器(FF和Chrome)從服務器返回的不同頭文件。CORS AWS S3和cloudfront

捲曲返回CORS頭

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 

瀏覽器,另一方面不包含任何CORS標頭。

請求:

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 

響應:

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 

任何解釋?謝謝。

UPD: 正如我建議我更新Cors配置。它並沒有幫助

<?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: 顯然是由兩個方面原因 1)CDN緩存 2)使用郵差檢查CORS導致的問題。郵差(瀏覽器版本)總是將ORIGIN替換爲「chrome:// extensions ....」之類的東西,所以我們不能用它來進行測試。

回答

2

嘗試增加:<AllowedMethod>HEAD</AllowedMethod>在AWS S3 CORS配置:

桶>權限> CORS配置

<?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> 

那麼你應該在瀏覽器中看到&捲曲:

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

一點也沒有」 t幫助...仍然一樣 –

+0

@ArtemIbragimov當我在AWS中編輯CORS配置時,在查看正確的標題之前需要一點時間。不知道這是否是你的情況,但它永遠不會等待。 –

+0

這就是爲什麼我更新MaxAgeSeconds,所以我可以肯定知道更改發生的時間..我看到更新「訪問控制 - 最大年齡」在捲曲,但瀏覽器仍然是相同的 –

1

瀏覽器不要當您直接導航至https://s3-ap-southeast-1.amazonaws.com/gameofshred-qa/site/fontawesome-webfont.912ec66d7572ff821749.svg時,不會發送Origin標題。

但是,當您使用XHR/Fetch發送請求時,瀏覽器會發送Origin標題。如果請求包含Origin標頭,則該服務器的設置將發送Access-Control-Allow-Origin: * - 因爲它的確如此,瀏覽器會讓您的前端代碼訪問響應。

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>

所以這就是爲什麼當你直接在瀏覽器導航到https://s3-ap-southeast-1.amazonaws.com/gameofshred-qa/site/fontawesome-webfont.912ec66d7572ff821749.svg再看看響應頭,你不會看到Access-Control-Allow-Origin響應頭。

但是您的前端JavaScript代碼將會看到它,因爲與直接導航到瀏覽器的情況不同,瀏覽器確實會發送Origin標頭以查找您從前端代碼發出的請求。

當請求包含Origin標頭時,配置服務器僅發送Access-Control-Allow-Origin響應標頭是非常普遍的事情。因爲這個服務器配置這樣一來,這就是爲什麼如果你犯了一個請求,將其與curl或什麼的,你只能從它的響應得到Access-Control-Allow-Origin如果您發送的Origin請求頭:

# 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 
+0

我明白那件事...這就是爲什麼我使用郵遞員並手動設置Origin標頭。 –