amazon-s3 - 正确的S3 + Cloudfront CORS配置？

我的应用程序将图像存储在S3上，然后通过Cloudfront对其进行代理。我很高兴能够使用新的S3 CORS支持，以便可以使用HTML5 canvas方法(具有跨域策略)，但似乎无法正确配置S3和Cloudfront。当我尝试将图像转换为 Canvas 元素时，仍然遇到“未捕获的错误:SECURITY_ERR:DOM异常18”。

这是我到目前为止的内容:

S3

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

Cloudfront

起源

Origin Protocol Policy: Match Viewer

HTTP Port: 80

HTTPS Port: 443

行为举止

Origin: MY_WEBSITE_URL

Object Caching: Use Origin Cache Headers

Forward Cookies: None

Forward Query Strings: Yes

我这里缺少什么吗？

更新:
刚刚尝试将标题更改为

<AllowedHeader>Content-*</AllowedHeader>
<AllowedHeader>Host</AllowedHeader>

基于这个问题Amazon S3 CORS (Cross-Origin Resource Sharing) and Firefox cross-domain font loading

还是不走。

更新:有关请求的更多信息

Request
URL:https://d1r5nr1emc2xy5.cloudfront.net/uploaded/BAhbBlsHOgZmSSImMjAxMi8wOS8xMC8xOC81NC80Mi85NC9ncmFzczMuanBnBjoGRVQ/32c0cee8
Request Method:GET
Status Code:200 OK (from cache)

更新

我认为我的要求可能不正确，因此我尝试通过以下方式启用CORS:

img.crossOrigin = '';

但随后图像无法加载，并且出现错误:跨域资源共享策略拒绝了跨域图像加载。

最佳答案

2014年6月26日，AWS发布了proper Vary: Origin behavior on CloudFront，现在您只需

为您的S3存储桶设置CORS配置，包括
<AllowedOrigin>*</AllowedOrigin>

在CloudFront中

->分发->此来源的行为

允许的HTTP方法:+ OPTIONS

缓存的HTTP方法+ OPTIONS

基于所选请求 header 的

缓存:将Origin header 列入白名单。

等待约20分钟，同时CloudFront传播新规则

现在，您的CloudFront分发应该为不同的客户端Origin头缓存不同的响应(带有正确的CORS头)。