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

【问题标题】：How do I bypass CORS restrictions for an audio file when reading audio frequencies?读取音频时如何绕过音频文件的 CORS 限制？
【发布时间】：2017-04-27 14:42:46
【问题描述】：

我正在尝试在 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';

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

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

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

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

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

有关

【问题讨论】：

标签： javascript apache audio

【解决方案1】：

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

了解 CORS：

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

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

我做了什么：

启用 .htaccess 的使用（我认为您可以使用 apache2.conf 或 000-default.conf 完成同样的事情，但 .htaccess 文件更容易编辑和维护）。这些文件用于设置 apache 的标头和设置。我通过转到/etc/apache2/ 并编辑apache2.conf 启用了.htaccess 文件的使用。确保您的 <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"。保存您的文件。
使用此命令 sudo service apache2 restart 重新启动 Apache。如果出现提示，请输入您的密码。
通过音频，我添加了crossorigin="anonymous" 属性。您可以在此处阅读有关 CORS 设置（跨域）的更多信息 (https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) 我想您可以使用 ajax 和 xhr 请求进行设置。

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

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

【讨论】：