canvas.toDataURL() 导致安全错误答案

【问题标题】：canvas.toDataURL() causing a security errorcanvas.toDataURL() 导致安全错误
【发布时间】：2012-12-29 01:33:42
【问题描述】：

我正在通过KineticJS's .toDataURL() 方法使用 HTML5 画布和 .toDataURL() 函数。画布使用我的用户上传到站点的图像，这些图像存储在不同的机器和子域farm1.domain.com。

问题：当.toDataURL()被调用时，我得到了错误

SECURITY_ERR: DOM Exception 18

有没有办法解决这个问题？如果用户通过domain.com 访问页面并且图像托管在www.domain.com，我也会遇到同样的问题。

尝试：

我在 virtualhost 中的httpd.conf 中添加了以下几行并重新启动了 apache 服务。

Header add Access-Control-Allow-Origin "http://www.domain.com"
Header add Access-Control-Allow-Origin "http://domain.com"
Header add Access-Control-Allow-Origin "http://farm1.domain.com"

从domain.com 的页面访问托管在www.domain.com 上的图像时，我仍然遇到同样的错误！在 KineticJS 中有没有办法解决这个问题？

【问题讨论】：

可能重复：stackoverflow.com/questions/9344548/… 和 stackoverflow.com/questions/2390232/…
重复并被回答，看右栏中的相关，这里是spec
我猜必须将 origin-clean 标志设置为 true 以避免错误？这可以在 KineticJS 中完成吗？
这似乎在 Chrome 45 中有效，我只在 Safari 9 中遇到问题

标签： html apache canvas html5-canvas kineticjs

【解决方案1】：

没有办法解决这个错误。从不同域加载到画布中的图像将引发此错误，因为每个浏览器当前都已实现。在您的情况下，图像应该存储在同一个域中，并且您不会遇到异常。

【讨论】：

我无法将图像存储在其他服务器和 CDN 中，这真的很奇怪，尤其是当图像数量无法容纳在单个服务器中时......
@Nyxynyx 是的，不幸的是，这是画布元素的安全限制。

【解决方案2】：

您需要将Access-Control-Allow-Origin 标头添加到您正在加载的图像中，而不是添加到正在加载它们的页面中。有关此标头以及一般 CORS 的详细信息，您可能需要阅读专门讨论此问题的“CORS isn't just for XHR”。

【讨论】：