问题描述
我有一个在 pixie.strd6.com 上运行的网站，并通过 Amazon S3 托管图像，并为 images.pixie.strd6.com 使用 CNAME.
I have a site running at pixie.strd6.com and images hosted through Amazon S3 with a CNAME for images.pixie.strd6.com.
我希望能够将这些图像绘制到 HTML5 画布并调用 getImageData 方法，但它会抛出 Error: SECURITY_ERR: DOM Exception 18
I would like to be able to draw these images to an HTML5 canvas and call the getImageData method but it throws Error: SECURITY_ERR: DOM Exception 18
我尝试设置 window.domain = "pixie.strd6.com"，但没有效果.
I have tried setting window.domain = "pixie.strd6.com", but that has no effect.
另外，$.get("http://dev.pixie.strd6.com/sprites/8516/thumb.png?1293830982", function(data) {console.log(data)}) 也会引发错误:XMLHttpRequest 无法加载 http://dev.pixie.strd6.com/sprites/8516/thumb.png?1293830982.Access-Control-Allow-Origin 不允许使用 http://pixie.strd6.com.
Additionally, $.get("http://dev.pixie.strd6.com/sprites/8516/thumb.png?1293830982", function(data) {console.log(data)}) also throws an error: XMLHttpRequest cannot load http://dev.pixie.strd6.com/sprites/8516/thumb.png?1293830982. Origin http://pixie.strd6.com is not allowed by Access-Control-Allow-Origin.
理想情况下，HTML5 画布不会阻止从子域调用 getImageData.我研究过在 S3 中设置 Access-Control-Allow-Origin 标头，但没有成功.
Ideally HTML5 canvas wouldn't block calling getImageData from subdomains. I've looked into setting an Access-Control-Allow-Origin header in S3, but haven't succeeded.
非常感谢任何帮助或解决方法.
Any help or workarounds are greatly appreciated.
推荐答案
我们很高兴地宣布支持 Amazon S3 中的跨源资源共享 (CORS).您现在可以轻松构建使用 JavaScript 和 HTML5 与 Amazon S3 中的资源交互的 Web 应用程序，使您能够实施 HTML5 拖放上传到 Amazon S3、显示上传进度或更新内容.到目前为止，您需要在 Web 应用程序和 Amazon S3 之间运行自定义代理服务器来支持这些功能.
要配置您的存储桶以允许跨源请求，您需要创建一个 CORS 配置，一个带有规则的 XML 文档，用于标识您将允许访问您的存储桶的源，操作(HTTP 方法)将支持每个源，和其他特定于操作的信息.您最多可以向配置中添加 100 条规则.您将 XML 文档作为 cors 子资源添加到存储桶中.
这篇关于HTML5 Canvas getImageData 和同源策略的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！