3

我正在尝试使用跨域资源共享从 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

谢谢！

4

1 回答 1

3

好的，我发现了问题。很难调试，因为浏览器没有提供太多信息。这是客户端的一个问题——CORS 规范对如何发出请求非常挑剔。因此，就我而言，我认为问题在于仅将图像加载到图像标签中。

它似乎工作的唯一方法是如果我在加载图像之前设置“crossOrigin”属性：

 var grabbed = new Image();
 $(grabbed).attr('crossOrigin', '');
 $(grabbed).attr("src", mySource);

我能够调试的唯一方法是在客户端和不同的配置服务器端测试几种不同的设置，因为标头可能难以解释。（客户端的问题可能会使服务器看起来配置不正确）。

于 2013-08-24T19:53:18.393 回答