在Cloudfront上设置访问控制允许来源

我在使用AWS Cloudfront向Firefox提供静态资产时遇到问题。

Chrome可以完美运行，但Firefox返回CORS错误。

如果执行curl，我得到：

HTTP/1.1 200 OK
Content-Type: application/x-font-opentype
Content-Length: 39420
Connection: keep-alive
Date: Mon, 11 Aug 2014 21:53:50 GMT
Cache-Control: public, max-age=31557600
Expires: Sun, 09 Aug 2015 01:28:02 GMT
Last-Modified: Fri, 08 Aug 2014 19:28:05 GMT
ETag: "9df744bdf9372cf4cff87bb3e2d68fc8"
Accept-Ranges: bytes
Server: AmazonS3
Age: 2743
X-Cache: Hit from cloudfront
Via: 1.1 c445b20dfbf3128d810e975e5d84e2cd.cloudfront.net (CloudFront)
X-Amz-Cf-Id: ...

我认为需要标题：

Access-Control-Allow-Origin: *

谁能帮我？为什么在Firefox而不是Chrome上有问题？我该如何解决？

首先，您需要确保将原始标头列入白名单：

如果您希望CloudFront遵守跨域资源共享设置，请配置CloudFront以将Origin标头转发到您的源。

http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/RequestAndResponseBehaviorCustomOrigin.html#request-custom-cors

另请参阅：http : //aws.amazon.com/blogs/aws/enhanced-cloudfront-customization/

顺便说一句，关于serverfault / stackoverflow还有很多类似的问题，并且有很多答案。

这比接受的答案表明的要复杂一些。

使用Cloudfront + S3时，CORS支持实际上是在S3中实现的，根据Amazon的说法，它的工作方式如下：

请求的原始标头必须与AllowedOrigin元素匹配。

如果预检OPTIONS请求的请求方法必须是AllowedMethod元素之一，则请求方法（例如GET或PUT）或访问控制请求方法标头。

预检请求中请求的Access-Control-Request-Headers头中列出的每个头都必须与AllowedHeader元素匹配。

这很有道理，可能不清楚的是，如果客户端未发送任何Origin报头，则此处理根本不会完成。而且我们在前面使用Cloudfront，如果您只是托管静态资产，则可能已将其设置为在缓存时忽略所有标头。因此，如果从特定边缘节点到每个文件的第一个请求不包括Origin头，它将缓存没有Access-Control-Allow-Origin头的响应。

结果是第一个传入请求将确定所有请求返回的标头，直到缓存过期。

有几种方法可以解决此问题。

• 设置cloudfront以基于“ Origin”标头进行条件缓存。

如果您只希望少数几个或单个来源，则此方法效果很好，但否则缓存率可能会变得非常糟糕。

• 使用Lambda @ edge强制设置标头，对于每个原始（S3）请求，只需执行一次即可。

完全灵活，但会增加开销和成本。

• 使cloudfront对每个请求将“ Origin”标头覆盖为虚拟值。

这仅在“ Access-Control-Allow-Origin：*”情况下才真正有用，并且有点hacker，但是当在Cloudfront + S3上托管静态资产时，它可能是当前最好的解决方案。