在读取音频时，如何绕过音频文件的CORS限制？ [英] How do I bypass CORS restrictions for an audio file when reading audio frequencies?

问题描述

我正在尝试在codepen.io上创建一个音频可视化程序（ http：/ /codepen.io/www139/pen/oLrJAZ?editors=0010 ）。我已经构建了自己的Web服务器，我用它来上传项目的音频。您可以在没有CORS问题的情况下收听音频（ http://williamgreen.hopto.org/audioVisualization/ Song.mp3的）。但是，音频可视化程序需要访问才能读取声音频率。当我尝试读取音频时，我收到此错误：

I am attempting to create an audio visualization program on codepen.io (http://codepen.io/www139/pen/oLrJAZ?editors=0010). I have built my own web server which I used to upload the audio for the project. You can listen to the audio without CORS problems (http://williamgreen.hopto.org/audioVisualization/song.mp3). However, the audio visualization program requires access to read the sound frequencies. When I try to read the audio frequencies, I am given this error:

由于 http://williamgreen.hopto.org/audioVisualization/song.mp3

频率返回0。

当我添加此行时：

audio.crossOrigin = 'anonymous';

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

I no longer receive the error but the audio doesn't load.

我还尝试根据 https://stackoverflow.com在.htaccess中使用此标头设置CORS访问权限/ a / 11691776/3011082 。这个问题似乎也很有趣，但缺乏我需要的信息（由于CORS访问限制本地mp3文件 MediaElementAudioSource输出零。我也引用了这一点（ http://enable-cors.org/server_apache.html ）。

I have also tried setting CORS access with this header in .htaccess according to https://stackoverflow.com/a/11691776/3011082 . This question also seems interesting but lacks the information I need (MediaElementAudioSource outputs zeros due to CORS access restrictions local mp3 file). I also referenced this (http://enable-cors.org/server_apache.html).

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

Any suggestions? Are there any apache/PHP headers that need to be set? How can I get this working?

我曾经问过这个问题（如何使用apache2为我的Linux网络服务器上的音频文件设置CORS访问权限？）但我并不像我想的那样准确，答案对我没有帮助，这就是我问这个问题的原因。除了高中以外，我的大脑一直在工作这个难题几个月;）

I had asked this question a while back (How can I set CORS access for an audio file on my Linux webserver with apache2?) but I wasn't as accurate as I would like and the answers didn't help me which is why I asked this question. My brain has been working this puzzle for literally months aside from high school ;)

编辑：
我问这个问题揭示了更多的信息。问题很可能是CORS标题 CORS标题用于访问另一个域上的文件

推荐答案

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

I eventually figured out what to do after hours and hours of research and experimenting. There is very little documentation, as of this writing, available online showing how to do this. I hope people will find this helpful.

了解CORS：

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

CORS is an acronym for Cross Origin Resoruce Sharing. CORS is a new standard for sharing/accessing information between different domains. CORS basically is a method of using server headers to tell the browser if it is permitted to access or interact with a specific file on another server. While you can load most things without worrying about CORS (like images, audio, videos, and even other web pages), interaction with these elements requires special permission from the server. In my case, I was attempting to read frequencies from an audio file on another server. In this instance, I was attempting to access information which required authorization from special headers on the server.

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

Browser support is very good but, if you are supporting older browsers, you may want to see support tables here (http://caniuse.com/#search=cors)

我做了什么：

• 启用了.htaccess（我认为你可以用apache2.conf或000-default.conf完成同样的事情，但.htaccess文件更容易编辑和维护）。这些文件用于设置apache的标头和设置。我通过转到 / etc / apache2 / 并编辑了 apache2.conf 来启用了.htaccess文件的使用。确保您的<目录/ var / www /> 条目符合以下条件：

• Enabled the use of .htaccess (I think you can accomplish the same thing with apache2.conf or 000-default.conf but .htaccess files are much easier to edit and maintain). These files are used to set headers and settings for apache. I enabled the use of .htaccess files by going to /etc/apache2/ and edited apache2.conf. Make sure your <Directory /var/www/> entry matches the following:

<目录/ var / www />
期权指数FollowSymLinks
AllowOverride全部
要求所有已授予
< / Directory>

我在.htaccess文件中设置标头以允许从Codepen访问。在与您要共享的文件相同的目录中创建.htaccess文件。您只想分享您所拥有的内容，否则可能会产生安全风险。在.htaccess文件中键入：标题集设置Access-Control-Allow-Origin：http://websiteWantingToAccessYourFile.com。保存文件。

I set the headers in my .htaccess file to allow access from Codepen. Create a .htaccess file in the same directory as the file you want to share. You only want to share what you have to or you might create a security risk. Type this in your .htaccess file: Header set Access-Control-Allow-Origin: "http://websiteWantingToAccessYourFile.com". Save your file.

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

Restart Apache with this command sudo service apache2 restart. Enter your password if prompted.

通过音频，我添加了 crossorigin =anonymous属性。您可以在此处阅读有关CORS设置（crossorigin）的更多信息（ https：// developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes ）我想你可以用ajax和xhr请求设置它。

With the audio, I added the crossorigin="anonymous" attribute. You can read more about CORS settings (crossorigin) here (https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) I imagine you can set this with ajax and xhr requests.

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

Different versions of apache may have different file names or standards. Check to make sure this is correct for your version. I am running Apache 2.4.18 on my Ubuntu server.

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

Please tell me if this can be improved. I have spent a lot of time understanding this but I am not an expert. Post your suggestions in the comments. :)

这篇关于在读取音频时，如何绕过音频文件的CORS限制？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！