HTML5 Canvas getImageData 和同源策略

Question

我有一个运行在 pixie.strd6.com 的站点，图像通过 Amazon S3 托管，并带有 images.pixie.strd6.com 的 CNAME。

我希望能够将这些图像绘制到 HTML5 Canvas 上并调用 getImageData 方法，但它抛出 Error: SECURITY_ERR: DOM Exception 18

我试过设置 window.domain = "pixie.strd6.com" ，但这没有任何效果。

此外，$.get("http://dev.pixie.strd6.com/sprites/8516/thumb.png?1293830982", function(data) {console.log(data)})还会引发错误:XMLHttpRequest cannot load <a href="http://dev.pixie.strd6.com/sprites/8516/thumb.png?1293830982" rel="noreferrer noopener nofollow">http://dev.pixie.strd6.com/sprites/8516/thumb.png?1293830982</a>. Origin <a href="http://pixie.strd6.com" rel="noreferrer noopener nofollow">http://pixie.strd6.com</a> is not allowed by Access-Control-Allow-Origin.

理想情况下，HTML5 Canvas 不会阻止调用 getImageData来自子域。我研究过在 S3 中设置 Access-Control-Allow-Origin header ，但没有成功。

非常感谢任何帮助或解决方法。

Answer 1

Amazon recently announced CORS support

We're delighted to announce support for Cross-Origin Resource Sharing (CORS) in Amazon S3. You can now easily build web applications that use JavaScript and HTML5 to interact with resources in Amazon S3, enabling you to implement HTML5 drag and drop uploads to Amazon S3, show upload progress, or update content. Until now, you needed to run a custom proxy server between your web application and Amazon S3 to support these capabilities.

How to enable CORS

To configure your bucket to allow cross-origin requests, you create a CORS configuration, an XML document with rules that identify the origins that you will allow to access your bucket, the operations (HTTP methods) will support for each origin, and other operation-specific information. You can add up to 100 rules to the configuration. You add the XML document as the cors subresource to the bucket.