正确的S3 + Cloudfront CORSconfiguration？
我的应用程序在S3上存储图像，然后通过Cloudfront进行代理。 我很高兴能够使用新的S3 CORS支持，以便我可以使用HTML5canvas方法（它有一个交叉来源策略），但似乎无法正确configuration我的S3和Cloudfront。 当我尝试将图像转换为canvas元素时，仍然遇到“未捕获错误：SECURITY_ERR：DOMexception18”。
以下是我到目前为止：
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（跨源资源共享）和Firefox跨域字体加载
还是不行
更新：更多的信息请求
Request URL:https://d1r5nr1emc2xy5.cloudfront.net/uploaded/BAhbBlsHOgZmSSImMjAxMi8wOS8xMC8xOC81NC80Mi85NC9ncmFzczMuanBnBjoGRVQ/32c0cee8 Request Method:GET Status Code:200 OK (from cache)
UPDATE
我想也许我的要求是不正确的，所以我尝试启用CORS
img.crossOrigin = '';
但然后图像不加载，我得到的错误：跨源图像加载被拒绝跨源资源共享策略。
2014年6月26日，AWS 在CloudFront上发布了适当的Vary：Origin行为，所以现在你只需要
-
为您的S3存储桶设置一个CORSconfiguration，其中包括
<AllowedOrigin> * </ AllowedOrigin>
-
在CloudFront – > Distribution – > Behaviors中，使用“Forward Headers：Whitelist”选项，并将“Origin”标题列入白名单。
-
CloudFront传播新规则时等待〜20分钟
现在，您的CloudFront分配应该为不同的客户端Origin标头caching不同的响应（具有适当的CORS标头）。
更新：对于CloudFront最近的更改，这不再是事实。 yippee的！ 查看其他回复的详细信息。 我将这里留下来的背景/历史。
问题
CloudFront不支持CORS 100％。 问题是CloudFront如何caching对请求的响应。 之后，对于相同URL的任何其他请求将导致caching的请求， 而不pipe其来源 。 关键是它包含来自原点的响应标题。
在CloudFront从Origin: http://example.comcaching任何东西之前的第一个请求Origin: http://example.com有一个响应头：
Access-Control-Allow-Origin: http://example.com
来自Origin: https://example.com第二个请求（请注意，HTTPS不是HTTP）也具有以下响应标头：
Access-Control-Allow-Origin: http://example.com
因为这是CloudFront为URL所caching的内容。 这是无效的 – 浏览器控制台（至less在Chrome中）将显示CORS违规消息，事情将中断。
解决方法
build议的解决方法是针对不同的来源使用不同的url。 诀窍是附加一个不同的唯一查询string，以便每个来源有一个cachinglogging。
所以我们的url是这样的：
http://.../some.png?http_mysite.com https://.../some.png?https_mysite.com
这种工作，但任何人都可以通过交换querystrings使您的网站工作很差。 这可能吗？ 可能不是，但debugging这个问题是一个巨大的麻烦。
正确的解决方法是在CORS完全支持之前不要使用CloudFront和CORS。
在实践中
如果您使用CloudFront作为CORS，则可以使用另一种方法，这种方法在CORS不适用时可以使用。 这并不总是一个选项，但现在我dynamic加载字体的JavaScript。 如果基于CORS的对CloudFront的请求失败，我将回退到服务器端的代理，使其字体（不是交叉原点）。 这样，即使CloudFront以某种方式得到了一个错误的字体cachinglogging，事情仍然继续。
不完全确定你的问题是什么，但：
https://forums.aws.amazon.com/thread.jspa?messageID=377513
回答了我在CORS，S3和Cloudfront方面的一些问题。
我还发现，一个桶中的一些资产将返回正确的CORS头，有些则不会。 资产无效后，他们都回来了正确的标题，不知道为什么一些需要失效，其他人没有同时上传，相同types相同的桶:(
