如何使用 apache2 在我的 Linux 网络服务器上设置音频文件的 CORS 访问权限？

Posted 2023-03-05

【中文标题】如何使用 apache2 在我的 Linux 网络服务器上设置音频文件的 CORS 访问权限？

【英文标题】：How can I set CORS access for an audio file on my Linux webserver with apache2?

【发布时间】：2016-11-25 10:43:55

【问题描述】：

我正在尝试在 codepen 上创建一个音频可视化项目。我尝试使用 OneDrive 托管音频文件，但收到 CORS 限制错误。现在我更进一步，创建了自己的 Web 服务器 (http://publicwebserverdemo.hopto.org)，我在其中托管了音频文件 (http://publicwebserverdemo.hopto.org/publicAudio/audio.mp3)。我已经在互联网上尝试了几组指令来使用 .htaccess 文件实现 CORS，但我没有任何运气。如何授予 CORS 对音频文件的 codepen 的访问权限？

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

这是示例 codepen 的复制（我从 Internet 上的某个地方获取了用于测试 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>

【问题讨论】：

This 似乎工作得很好，没有 CORS 限制。

是的，但是当我尝试使用音频分析仪获取频率/分贝信息时，我得到了 CORS 错误； MediaElementAudioSource outputs zeroes due to CORS access restrictions for http://publicwebserverdemo.hopto.org/publicAudio/audio.mp3。音频可以加载和“收听”就好了。问题是当我使用音频分析器获取音频信息时，我得到了 CORS 错误。

您通常将Header add 指令与您希望允许的 URL 添加到一起。

有趣！以前没看到。谢谢！等我完成生物作业后我会试一试:)

【参考方案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/>
        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。

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