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

Question

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

由于http://williamgreen.hopto.org/audioVisualization/song.mp3 的CORS 访问限制，MediaElementAudioSource 输出零

频率返回为 0。

当我添加这一行时：

audio.crossOrigin = 'anonymous';

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

我还尝试根据/sf/answers/818424351/在 .htaccess 中使用此标头设置 CORS 访问。这个问题似乎也很有趣，但缺少我需要的信息（由于 CORS 访问限制本地 mp3 文件，MediaElementAudioSource 输出零）。我也参考了这个（http://enable-cors.org/server_apache.html）。

有什么建议？是否有任何需要设置的 apache/PHP 标头？我怎样才能让它工作？

不久前我问过这个问题（如何使用 apache2 为 Linux 网络服务器上的音频文件设置 CORS 访问权限？）问了这个问题。除了高中之外，我的大脑已经在这个难题上工作了几个月；）

编辑：我问了这个问题，它揭示了更多信息。该问题很可能与用于访问另一个域上的文件的 CORS 标头CORS 标头有关

Answer 1

经过数小时的研究和试验，我最终想出了该怎么做。在撰写本文时，几乎没有在线文档显示如何执行此操作。我希望人们会发现这很有帮助。

了解 CORS：

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

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

我做了什么：

• 启用 .htaccess 的使用（我认为你可以用 apache2.conf 或 000-default.conf 完成同样的事情，但 .htaccess 文件更容易编辑和维护）。这些文件用于为 apache 设置头文件和设置。我通过转到/etc/apache2/并编辑.htaccess 文件来启用 .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"属性。您可以在此处（https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes）阅读有关 CORS 设置（跨域）的更多信息，我想您可以使用 ajax 和 xhr 请求进行设置。

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

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