Canvas 如何调试CORS错误

我正在尝试使用跨源资源共享从AmazonS3获取图像，以便使用canvas.toDataUrl（）方法

在S3上，我将铲斗上的CORSconfiguration设置为：

<?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>

答复：

 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

---

谢谢

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

唯一可行的方法是在加载图像之前设置“crossOrigin”属性：

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

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

 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

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