HTML5 Rackspace 访问控制允许来源不工作

Question

所以我在 Rackspace Cloud Files 上有一些视频文件，但由于我使用 HTML5 函数 (.toDataURL())，“SECURITY_ERR: DOM Exception 18”不断被抛出。当我在我的服务器上使用视频文件时，我的代码工作正常。

所以我阅读了有关 CORS 的信息，并像这样修改了我的 Rackspace 云文件 header :

access-control-allow-credentials:   true    
access-control-allow-origin:    [my domain here]    
access-control-allow-headers:   Content-Type, Depth, User-Agent, X-File-Size, X-Requested-With, If-Modified-Since, X-File-Name, Cache-Control
access-control-allow-methods:   OPTIONS, GET, POST  
access-control-expose-headers:  X-File-Size, X-Requested-With, If-Modified-Since, X-File-Name
Content-Type:   video/webm

但是 DOM Exception 18 错误不断被抛出。我不知道是什么问题。我使用 web-sniffer.net 检查了我在 Rackspace 上的视频文件是否正在输出 HTTP header ，结果是，这是什么问题，为什么它不起作用？

我已经在 IE9、Chrome 19、Safari 5.1.2 和 Aurora 12.0a2 上尝试过，它们在任何这些浏览器上都不起作用，所以我确定这不是浏览器问题。

我只需要摆脱这个 DOM 异常 18 错误。

Answer 1

如果您的内容位于 CDN(或除当前主机之外的任何其他主机)，则 toDataURL() 将不起作用这是 CANVAS 元素的安全限制。

比较http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#security-with-canvas-elements有关禁止内容的详细信息

基本上，无论何时您想在 Canvas 中对图像或视频进行操作并保存结果，您都必须在同一个域中拥有所有先前的内容。一种解决方法是获取所需的文件并在用户编辑时临时保存它们