Question

我正在尝试在codepen.io（http://codepen.io/www139/pen/oLrJAZ?editors=0010）上创建一个音频可视化程序。我已经构建了自己的Web服务器，我用它来上传项目的音频。您可以在没有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

很可能出现此问题

Answer 1

我最终想出了经过数小时的研究和实验后该做些什么。截至撰写本文时，很少有文档在线提供如何执行此操作的文档。我希望人们会觉得这很有帮助。

了解CORS：

CORS是 C ross O rigin R esoruce S haring的首字母缩写词。 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设置（crossorigin）的信息（https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes）我想你可以用ajax和xhr请求设置它。

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

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

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

1 个答案: