用于访问其他域

Question

我正在尝试在Codepen上创建一个音频可视化程序。我用apache创建了自己的Ubuntu Web服务器，允许我直接访问修改标头和服务器的配置。

虽然浏览器可以访问不同域上的文件，但它需要特殊的CORS头来读取音频中的频率。要读取音频，我必须使用createMediaElementSource来访问包括频率在内的音频信息。当浏览器看到此JavaScript方法时，它知道必须在服务器上设置某些标头以允许访问。这让我们了解了这个问题的动机：需要设置哪些标题？

我测试的所有浏览器都返回了CORS错误的变体。 这是Firefox中的错误，尽管我已经在Chrome，Opera和Safari中测试了它，结果类似：

  

阻止跨源请求：同源策略禁止在http://williamgreen.hopto.org/audioVisualization/song.mp3读取远程资源。 （原因：CORS标题'Access-Control-Allow-Origin'与'（null）'不匹配。）

该文件返回206 partial content。 以下是返回的服务器标头（当前）： 以下是已发送的标头（当前）：

function log(text) {
  document.getElementById("log").textContent += text + "\n";
}

var audio, source, context;
var url = "http://williamgreen.hopto.org/audioVisualization/song.mp3";

document.addEventListener("DOMContentLoaded", function() {
  log("URL: " + url);
  
  log("Creating Audio instance from audio file");
  audio = new Audio(url);
  audio.crossOrigin="anonymous";
  
  audio.addEventListener("canplay", function() {
    log("Playing audio file through HTML5 Audio for 3 seconds");
    audio.play();
    
    setTimeout(function() {
      log("Creating Web Audio context");
      context = new (typeof AudioContext != "undefined" ? AudioContext : webkitAudioContext)();

      log("Calling createMediaElementSource on audio (switching to Web Audio)");
      source = context.createMediaElementSource(audio);
      
      setTimeout(function() {
        log("Connecting source to context destination");
        source.connect(context.destination);
        
        log("\nIf no sound can be heard right now, the problem was reproduced.");
      }, 1000);
    }, 3000);
  });
});

<div id="log"></div>

我需要做些什么来改变它？

Answer 1

我的第一个想法是问题是你的

Access-Control-Allow-Origin: *, *

我不认为理解*, *这件事。试试*。

编辑：您可以使用以下命令检查标题的真实外观：

curl -v -o /dev/null http://williamgreen.hopto.org/audioVisualization/song.mp3

而且，它甚至对我有用，屈服于（在许多其他标题中）：

< Access-Control-Allow-Origin: *

所以这就是hunky-dory。

其次，你是从file:来源运行的吗？这不适用于Chrome（我认为它适用于Firefox，但可能会改变）。您必须从http:或https:来源运行它。

通过＆＃34;从文件运行：origin＆＃34;我的意思是，正在运行的HTML文件是从一个带有＆＃34;文件：＆＃34;的URL加载的Javascript。如果是这样，那就不太可行了。