我正在尝试使用跨域资源共享从 Amazon S3 获取图像,以便可以使用 canvas.toDataUrl() 方法。
在 S3 上,我将存储桶上的 CORS 配置设置为:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
当 canvas.toDataURL() 抛出安全错误代码 18 时,我猜这是因为必须使用“crossOrigin”属性集加载图像。
尽管如此,无论我如何从 S3 加载图像,例如:
<img src="http://s3.amazonaws.com/storybookstorage/wood.png" crossOrigin="anonymous">
当我加载此图像时,Chrome 现在会给我错误:
跨域资源共享策略拒绝跨域图像加载。
任何人都可以帮助我找出问题所在,或者甚至我如何确定问题可能出在哪里?
我的图像请求标头(来自 chrome 开发工具):
要求:
GET /storybookstorage/wood.png HTTP/1.1
Host: s3.amazonaws.com
Connection: keep-alive
Cache-Control: max-age=0
Accept: image/webp,*/*;q=0.8
If-None-Match: "d5098b2c3d1417da8ccd9764612248ca"
If-Modified-Since: Thu, 08 Aug 2013 01:10:23 GMT
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.57 Safari/537.36
DNT: 1
Referer: http://0.0.0.0:3000/items/1/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
回复:
Date:Sat, 24 Aug 2013 00:27:56 GMT
ETag:"d5098b2c3d1417da8ccd9764612248ca"
Last-Modified:Thu, 08 Aug 2013 01:10:23 GMT
Server:AmazonS3
x-amz-id-2:gyR2VMt9hec8HrGvcXvDrrRb/sOm3i/WpUaRdnpr/PY2VoaJigSdA960B0q83zzN
x-amz-request-id:434E3571705359E9
谢谢!