我有一个运行在 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 ，但没有成功。
非常感谢任何帮助或解决方法。
最佳答案
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.
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.
关于HTML5 Canvas getImageData 和同源策略，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4672643/