Question

我正在尝试使用Web音频API和createMediaElementSource（）来创建播客网络的音频可视化，这与模型explained in this tutorial非常相似。到目前为止，我已经知道它可以在Chrome和you can see it here中正常工作（请注意：单击红色框以启动它）。

更新：根据评论中的讨论，现在很清楚，出现问题是因为通过302重定向将请求重定向到另一个URL。

但是，尽管Safari显示了正在播放的曲目，但Safari却不工作，不输出声音，也不产生可视化效果。我认为这与我请求音频的服务器的CORS策略有关，因为我也尝试使用this audio source，它在所有浏览器中都很好用。我怀疑是由于this standard网络音频API引起的问题。

它仅在野生动物园中发生的事实让我祈祷，在我或服务器主机的CORS策略中，有一些简单的语法解决方案可以使它起作用。我希望有人可以准确指出导致此问题的标题请求/响应出了什么问题。让我知道是否需要提供更多信息。为了避免出现问题，我在下面留下了AudioContext代码的简化版本。

//definitions
var url='https://rss.art19.com/episodes/72a3bc7e-118a-4171-8be4-125913860ef7.mp3';
//in safari it works with the link below, but not with any art19 link such as the one above.
//https://s3-us-west-2.amazonaws.com/s.cdpn.io/858/outfoxing.mp3
var audiotag=document.querySelector('audio');
var AudioContext = window.AudioContext || window.webkitAudioContext;
var context;
var statcontext;
var analyser;
var source;
var loopf;

//on load:
context=new AudioContext();
audiotag.crossOrigin="anonymous";
audiotag.preload="none";
audiotag.src=url;
source=context.createMediaElementSource(audiotag);
analyser=context.createAnalyser();
source.connect(analyser);
analyser.connect(context.destination);
analyser.smoothingTimeConstant=0.85
analyser.fftSize = 16384;

//later, on user input(clicking on red bar):
var bufferLength = analyser.frequencyBinCount;
var dataArray = new Uint8Array(bufferLength);
function updateDisplay() {
  loopf=requestAnimationFrame(updateDisplay);
  analyser.getByteFrequencyData(dataArray);
  draw(dataArray.slice(100,150),-100,100);
}
context.resume();
audiotag.play();
updateDisplay();

Answer 1

简短答案：向您的请求发送302响应的服务的维护者应更新其后端配置，以便将Access-Control-Allow-Origin标头添加到302响应中（以及其他{ {1}}重定向响应）-不仅是3xx OK响应。

如果您不能让他们这样做，那么基本上您只有另外两个选择：

更改前端代码以通过CORS代理进行请求；否则
根本不从您的前端代码发出请求，而是完全从您的后端服务器端代码（在same-origin policy不适用的情况下）发出请求。

说明

发生了什么事

您的前端代码向200 URL发出请求。
https://rss.art19.com/episodes/….mp3服务器使用具有https://rss.art19.com标头的302重定向响应进行回复。
浏览器收到该Location: https://content.production.cdn.art19.com/…episodes/….mp3响应，并检查响应标头以查看是否有302标头。如果没有，浏览器将阻止您的代码访问Access-Control-Allow-Origin重定向URL的响应。相反，浏览器将停止并引发异常。

有时，您可以通过采用重定向URL并将其用作前端代码中的请求URL来解决此问题。例如，不要在代码中使用https://content.production.cdn.art19.com/….mp3，而应使用https://rss.art19.com/episodes/….mp3 —因为该URL的https://content.production.cdn.art19.com/…episodes/….mp3响应中确实包含200 OK标头）。

但是在实践中，在很多情况下（大多数情况下），这种策略是行不通的-因为先行确定重定向URL是什么是不可行的。

请注意，根据设计，浏览器不会将重定向URL公开给前端代码。因此，从前端代码以编程方式获取重定向URL并对其进行另一个请求是不可能的。

前端JavaScript请求被重定向302，但最终失败

1 个答案: