2017-04-19 157 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标头。 –