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

问题描述

我的应用程序商店的S3图像，然后他们代理了通过的Cloudfront。我很高兴能使用新的S3 CORS支持，让我可以使用HTML5的画布方法（其中有一个跨域策略），但似乎无法正确配置我的S3和的Cloudfront。不过运行到未捕获的错误：SECURITY_ERR：DOM异常18当我试图将图像转换为canvas元素

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>

的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

有我丢失的东西在这里？

更新： 刚才试了标题更改为

UPDATE : Just tried changing the headers to

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

基于这个问题的 href="http://stackoverflow.com/questions/12229844/amazon-s3-cors-cross-origin-resource-sharing-and-firefox-cross-domain-font-loa">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)

更新

我想也许我的要求是不正确的，所以我试图让CORS与

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.

推荐答案

在2014年6月26日AWS发布<一个href="http://aws.amazon.com/about-aws/whats-new/2014/06/26/amazon-cloudfront-device-detection-geo-targeting-host-header-cors/">proper因人而异：对CloudFront的原产地的行为即时所以你只要

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

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

1. Set a CORS Configuration for your S3 bucket including

＆LT; AllowedOrigin＆GT; *＆LT; / AllowedOrigin＆GT;

<AllowedOrigin>*</AllowedOrigin>

在CloudFront的 - >销售 - >行为这个原点，使用正标题：白名单选项和白名单的原产地标题

In CloudFront -> Distribution -> Behaviors for this origin, use the Forward Headers: Whitelist option and whitelist the 'Origin' header.

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

Wait for ~20 minutes while CloudFront propagates the new rule

现在你CloudFront的分布应该缓存的不同反应（适当的CORS头）针对不同的客户端产地头。

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

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