正确的 S3 + Cloudfront CORS 配置? [英] Correct S3 + Cloudfront CORS Configuration?

问题描述

我的应用程序将图像存储在 S3 上，然后通过 Cloudfront 代理它们.我很高兴使用新的 S3 CORS 支持，这样我就可以使用 HTML5 画布方法(具有跨域策略)，但似乎无法正确配置我的 S3 和 Cloudfront.当我尝试将图像转换为画布元素时，仍然遇到未捕获的错误:SECURITY_ERR:DOM 异常 18".

My application stores images on S3 and then proxies them through Cloudfront. I'm excited to use the new S3 CORS support so that I can use HTML5 canvas methods (which have a cross-origin policy) but can't seem to configure my S3 and Cloudfront correctly. Still running into "Uncaught Error: SECURITY_ERR: DOM Exception 18" when I try to convert an image to a canvas element.

这是我目前所拥有的:

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

有什么我遗漏的地方吗?

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

UPDATE : Just tried changing the headers to

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

基于这个问题 Amazon S3 CORS(跨域资源共享)和Firefox跨域字体加载

还是不行.

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

UPDATE: MORE INFO ON REQUEST

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

更新

我想我的请求可能不正确，所以我尝试使用

I think maybe my request wasn't correct, so I tried enabling CORS with

img.crossOrigin = '';

但随后图像无法加载，我收到错误消息:跨域资源共享策略拒绝跨域图像加载.

but then the image doesn't load and I get the error: Cross-origin image load denied by Cross-Origin Resource Sharing policy.

推荐答案

AWS 于 2014 年 6 月 26 日发布 proper Vary: CloudFront 上的源行为 所以现在你只需

On June 26, 2014 AWS released proper Vary: Origin behavior on CloudFront so now you just

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

1. Set a CORS Configuration for your S3 bucket including

*

在 CloudFront -> 分布 -> 此源的行为

In CloudFront -> Distribution -> Behaviors for this origin

• 允许的 HTTP 方法:+OPTIONS
• 缓存的 HTTP 方法 +OPTIONS
• 基于选定请求标头的缓存:将 Origin 标头列入白名单.

• Allowed HTTP Methods: +OPTIONS
• Cached HTTP Methods +OPTIONS
• Cache Based on Selected Request Headers: Whitelist the Origin header.

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

Wait for ~20 minutes while CloudFront propagates the new rule

现在您的 CloudFront 分配应该为不同的客户端 Origin 标头缓存不同的响应(使用正确的 CORS 标头).

Now your CloudFront distribution should cache different responses (with proper CORS headers) for different client Origin headers.

这篇关于正确的 S3 + Cloudfront CORS 配置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！