CORS与Amazon S3和的Cloudfront [英] CORS with Amazon S3 and Cloudfront
问题描述
我有一个Rails应用程序托管在Heroku这是使用CloudFront的与托管在S3资产。
I have a Rails App hosted on Heroku which is using CloudFront with assets hosted on S3.
据显示资产prefectly(尽管它采取了一些摔跤)。
It displays assets prefectly(although it took some wrestling).
我的设置对的Cloudfront:
My setup for Cloudfront:
Forward Headers: Whitelist
Whitelist Headers: Origin
Forward Query Strings: No
CORS设置的S3存储:
CORS setup for the S3 bucket:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
这是调用图像(咖啡)的JS
The JS that calls the image(coffee)
@mousemove (e) ->
ctx = $("<canvas>").attr(
width: @width
height: @height
)[0].getContext("2d")
ctx.drawImage(this, 0, 0, @width, @height)
# This is because firefox doesn't support offset[X|Y]
if(e.offsetX == undefined)
xpos = e.pageX - $(this).offset().left;
ypos = e.pageY - $(this).offset().top;
else
xpos = e.offsetX;
ypos = e.offsetY;
e.rgb = ctx.getImageData(xpos, ypos, 1, 1).data
return f.call this, e
这个错误有:
未捕获引发SecurityError:未能执行getImageData'上'CanvasRenderingContext2D:画布已被污染的跨域数据
卷曲的请求:
卷曲-i -H产地:http://example.com/ http://randomness.cloudfront.net/franchisees/logos/000/000/006/icon/Screen_Shot_2014-08-06_at_15.21.14.png?1407334881$c$c>
Response:
HTTP/1.1 200 OK
Content-Type: image/png
Content-Length: 6888
Connection: keep-alive
Date: Wed, 06 Aug 2014 16:15:54 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, HEAD
Last-Modified: Wed, 06 Aug 2014 14:21:23 GMT
ETag: "6f266467cf0a570526869bcf280da412"
Accept-Ranges: bytes
Server: AmazonS3
Age: 21
Vary: Origin
X-Cache: Hit from cloudfront
Via: 1.1 16d4ae36524b457e558b982004526450.cloudfront.net (CloudFront)
X-Amz-Cf-Id: 5Vm_eCn_lTOHEMzPEcmtCGYCUdOZ2r_9R4W6mEPTOPFUIJe0ilMP7g==
*snip*
它不是一个缓存的问题,我一直在使用新的图像每一次,虽然这个请求是在缓存版本。
Its not a caching issue I've been using fresh images every time, although this request was on a cached version.
我知道有工作变通,但我真的很喜欢这样的工作方式。
I know there are work arounds, but I would really like it to work this way.
我是什么在这里失踪?
推荐答案
现在的问题是,默认情况下,浏览器不会检查这些CORS头文件 - 所有的图像拉脏。为了您的CORS头做任何事情,你需要设置在IMG的 crossorigin
属性,使你得到一个的 CORS启用图片。
The problem is that by default the browser won't check these cors headers - all images pulled in are dirty. For your cors headers to do anything you need to set the crossorigin
attribute on the img, so that you get a cors enabled image.
<img src="blah" crossorigin="anonymous" />
该crossorigin属性可以匿名
的值或的用的凭证
。这使得跨域Ajax请求时,类似于 withCredentials
选项:在默认情况下的cookie,HTTP认证等将不被发送。如果您正在创建图像中的javascript那么对应的属性是 crossOrigin
。
The crossorigin attribute can take the values anonymous
or use-credentials
. This is analogous to the withCredentials
option when making cross domain ajax requests: by default cookies, http auth etc won't be sent. If you're creating the image in javascript then the corresponding property is crossOrigin
.
按照 MDN文档的Chrome,Firefox和IE浏览器11支持这一点,但公布的歌剧或Safari浏览器的版本不
According to the MDN documentation Chrome, Firefox and IE 11 support this, but released versions of Opera or Safari don't
这篇关于CORS与Amazon S3和的Cloudfront的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!