javascript - 读取音频时如何绕过音频文件的 CORS 限制？

Question

我正在尝试在 codepen.io (http://codepen.io/www139/pen/oLrJAZ?editors=0010) 上创建一个音频可视化程序。我已经建立了自己的网络服务器，用于上传项目的音频。您可以收听没有 CORS 问题的音频 (http://williamgreen.hopto.org/audioVisualization/song.mp3)。但是，音频可视化程序需要访问才能读取声音频率。当我尝试读取音频时，出现此错误:

MediaElementAudioSource outputs zeroes due to CORS access restrictions for http://williamgreen.hopto.org/audioVisualization/song.mp3

频率返回为 0。

当我添加这一行时:

audio.crossOrigin = 'anonymous';

我不再收到错误消息，但没有加载音频。

我还尝试根据 https://stackoverflow.com/a/11691776/3011082 在 .htaccess 中使用此 header 设置 CORS 访问权限.这个问题似乎也很有趣，但缺少我需要的信息( MediaElementAudioSource outputs zeros due to CORS access restrictions local mp3 file)。我也引用了这个( http://enable-cors.org/server_apache.html)。

有什么建议么？是否需要设置任何 apache/PHP header ？我怎样才能得到这个工作？

不久前我曾问过这个问题( How can I set CORS access for an audio file on my Linux webserver with apache2?)，但我并没有像我想要的那样准确，而且答案对我没有帮助，这就是我问这个问题的原因。除了高中，我的大脑已经在这个谜题上工作了几个月；)

编辑:
我问了这个问题，它揭示了更多信息。问题很可能与 CORS header CORS headers for accessing a file on another domain 有关

Answer 1

经过数小时的研究和实验，我最终弄清楚了该怎么做。在撰写本文时，在线可用的文档很少，显示如何执行此操作。我希望人们会觉得这很有帮助。

了解 CORS:

CORS 是 的首字母缩略词中号罗斯 O 瑞金 R 资源 小号 哈林。 CORS 是用于在不同域之间共享/访问信息的新标准。 CORS 基本上是一种使用服务器 header 告诉浏览器是否允许访问或与另一台服务器上的特定文件交互的方法。虽然您可以加载大多数内容而无需担心 CORS(如图像、音频、视频甚至其他网页)，但与这些元素的交互需要服务器的特殊许可。就我而言，我试图从另一台服务器上的音频文件中读取频率。在这种情况下，我试图访问需要服务器上特殊 header 授权的信息。

浏览器支持非常好，但如果您支持较旧的浏览器，您可能希望在此处查看支持表 (http://caniuse.com/#search=cors)

我做了什么:

启用 .htaccess 的使用(我认为您可以使用 apache2.conf 或 000-default.conf 完成同样的事情，但 .htaccess 文件更容易编辑和维护)。这些文件用于设置 apache 的 header 和设置。我通过转到 /etc/apache2/ 启用了 .htaccess 文件的使用。并编辑 apache2.conf .确保您的 <Directory /var/www/>条目匹配以下内容:
<Directory /var/www/>
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
</Directory>

我在我的 .htaccess 文件中设置了标题以允许从 Codepen 访问。在 中创建一个 .htaccess 文件同目录作为您要共享的文件。您只想分享您必须分享的内容，否则您可能会产生安全风险。在您的 .htaccess 文件中输入:Header set Access-Control-Allow-Origin: "http://websiteWantingToAccessYourFile.com" .保存您的文件。

使用此命令重新启动 Apache sudo service apache2 restart .如果有提示，请输入密码。

通过音频，我添加了 crossorigin="anonymous"属性。您可以在此处阅读有关 CORS 设置(跨域)的更多信息(https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes)我想您可以使用 ajax 和 xhr 请求进行设置。

不同版本的 apache 可能有不同的文件名或标准。检查以确保这对于您的版本是正确的。我在我的 Ubuntu 服务器上运行 Apache 2.4.18。

请告诉我这是否可以改进。我花了很多时间来理解这一点，但我不是专家。在评论中发表您的建议。 :)