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

Posted 2023-03-04

【中文标题】HTML5 Rackspace 访问控制允许来源不起作用

【英文标题】：HTML5 Rackspace Access-Control-Allow-Origin Not Working

【发布时间】：2012-04-27 10:03:49

【问题描述】：

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

所以我阅读了有关 CORS 的信息并修改了我的 Rackspace Cloud Files 标头，如下所示：

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 标头，它们是，有什么问题，为什么它不起作用？

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

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

【问题讨论】：

请编辑您的问题以包含您测试的浏览器的信息以及您使用的“HTML5 功能” - 有很多！我有根据的猜测是 Canvas + toDataURL 但是...

对不起，我刚刚添加了它...我在所有最新的浏览器上测试过，这是同样的错误，所以我认为这不是浏览器问题，是的，它是 toDataURL()抛出异常的函数。

【参考方案1】：

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

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

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

【讨论】：

但是根据w3.org/TR/cors/#use-cases，如果您修改访问控制标头，它应该可以工作，它们提供了在您修改标头时使用 toDataURL() 的跨域源示例。它不适用于视频或 CDN，还是我遗漏了一些重要信息？

您所说的 CORS 规则已被画布规范推翻 - 就这么简单。

这是一个 W3C 示例，说明“不污染画布元素”，所以不，画布规范。不会根据该用例否决 CORS。