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

Question

我的应用程序将图像存储在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>

云前端

起源

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 = '';

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

Answer 1

2014年6月26日AWS发布proper Vary: Origin behavior on CloudFront所以现在你只需

1. 为您的 S3 存储桶设置 CORS 配置，包括

   <AllowedOrigin>*</AllowedOrigin>

2. 在 CloudFront 中 -> 分布 -> 此源的行为

   • 允许的 HTTP 方法:+OPTIONS
   • 缓存的 HTTP 方法 + 选项
   • 基于选定的请求 header 进行缓存:将 Origin 列入白名单 header 。

3. 等待大约 20 分钟，CloudFront 会传播新规则

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