问题描述
我的应用程序商店的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>
仍然没有去。
更新:更多资讯根据客户要求
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发布proper因人而异:对CloudFront的原产地的行为即时所以你只要
On June 26, 2014 AWS released proper Vary: Origin behavior on CloudFront so now you just
-
设置CORS的配置为您的S3存储包括
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的配置?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!