如何使用apache2为Linux Web服务器上的音频文件设置CORS访问权限？

Question

我正在尝试在Codepen上创建一个音频可视化项目。 我尝试使用OneDrive托管音频文件，但是收到CORS限制错误。 现在，我进一步走了一步，创建了自己的Web服务器（ http://publicwebserverdemo.hopto.org ），并在其中托管了音频文件（ http://publicwebserverdemo.hopto.org/publicAudio/audio.mp3 ）。 我已经尝试通过Internet使用.htaccess文件实施CORS的几套指令，但是我对此没有任何运气。 如何授予CORS音频文件对Codepen的访问权限？

我在Ubuntu Mate 14.04上使用Apache（带有整个LAMP软件包）。

这是示例代码笔的复制品（我从互联网上的某个地方获取了用于测试CORS的代码）。

打开您的Web检查器控制台，并注意CORS通知：

MediaElementAudioSource outputs zeroes due to CORS access restrictions for http://publicwebserverdemo.hopto.org/publicAudio/audio.mp3

谢谢您的帮助 ：）

 // Create a new instance of an audio object and adjust some of its properties var audio = new Audio(); audio.src = 'http://publicwebserverdemo.hopto.org/publicAudio/audio.mp3'; audio.controls = true; audio.loop = true; audio.autoplay = true; // Establish all variables that your Analyser will use var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height; // Initialize the MP3 player after the page loads all of its HTML into the window window.addEventListener("load", initMp3Player, false); function initMp3Player(){ document.getElementById('audio_box').appendChild(audio); context = new webkitAudioContext(); // AudioContext object instance analyser = context.createAnalyser(); // AnalyserNode method canvas = document.getElementById('analyser_render'); ctx = canvas.getContext('2d'); // Re-route audio playback into the processing graph of the AudioContext source = context.createMediaElementSource(audio); source.connect(analyser); analyser.connect(context.destination); frameLooper(); } // frameLooper() animates any style of graphics you wish to the audio frequency // Looping at the default frame rate that the browser provides(approx. 60 FPS) function frameLooper(){ window.webkitRequestAnimationFrame(frameLooper); fbc_array = new Uint8Array(analyser.frequencyBinCount); analyser.getByteFrequencyData(fbc_array); ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas ctx.fillStyle = '#00CCFF'; // Color of the bars bars = 100; for (var i = 0; i < bars; i++) { bar_x = i * 3; bar_width = 2; bar_height = -(fbc_array[i] / 2); // fillRect( x, y, width, height ) // Explanation of the parameters below ctx.fillRect(bar_x, canvas.height, bar_width, bar_height); } } 

 div#mp3_player{ width:500px; height:60px; background:#000; padding:5px; margin:50px auto; } div#mp3_player > div > audio{ width:500px; background:#000; float:left; } div#mp3_player > canvas{ width:500px; height:30px; background:#002D3C; float:left; } 

 <div id="mp3_player"> <div id="audio_box"></div> <canvas id="analyser_render"></canvas> </div> 

Answer 1

经过数小时的研究和实验，我终于弄清楚该怎么做。 截至撰写本文时，网上几乎没有文档显示如何执行此操作。 我希望人们会发现这有帮助。

了解CORS：

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

浏览器支持非常好，但是，如果您支持较旧的浏览器，则可能需要在此处查看支持表（ http://caniuse.com/#search=cors ）

我做了什么：

启用了.htaccess的使用（我认为您可以使用apache2.conf或000-default.conf完成相同的操作，但.htaccess文件更易于编辑和维护）。 这些文件用于设置Apache的标题和设置。 我通过转到/ etc / apache2 /并编辑了apache2.conf来启用.htaccess文件的使用。 确保您输入的内容符合以下条件：

<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。

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