CORS标头用于访问另一个域上的文件 [英] CORS headers for accessing a file on another domain

问题描述

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

I am attempting to create an audio visualization program on Codepen. I have created my own Ubuntu web server with apache which allows me direct access to modify headers and configuration of the server.

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

While browsers can access files on a different domain, it requires special CORS headers to read the frequencies within the audio. To read audio frequencies, I must use createMediaElementSource to access audio information including the frequencies. When the browser sees this JavaScript method, it knows that there must be certain headers set on the server to allow access. Which brings us to the motives of this question: What headers need to be set?

我测试的所有浏览器返回一个CORS错误的变体。
这是Firefox中的错误，虽然我已经在Chrome，Opera和Safari中测试过类似的结果：

All of the browsers I have tested return a variation of a CORS error. This is what the error looks like in Firefox although I've tested it in Chrome, Opera, and Safari with similar results:

跨原始请求被阻止：同源策略不允许读取远程资源，请访问http://williamgreen.hopto.org/audioVisualization/song.mp3。 （原因：CORS标头'Access-Control-Allow-Origin'不匹配'（null）'）。

$ b b

文件返回 206部分内容。
以下是返回的服务器标头（目前）：

以下是已发送的标题（目前）：

The file returns 206 partial content. Here are the returned server headers (currently): Here are the sent headers (currently):

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>

推荐答案

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

My first thought is that the problem is your

Access-Control-Allow-Origin: *, *

我不认为这是理解 *，* 的东西。试试 * 。

I don't think it is understanding the *, * thing. Try just *.

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

you can check what the header really looks like with a command like this:

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

而且，lo，它甚至适用于我， headers）：

And, lo, it even works for me, yielding (among a lot of other headers):

< Access-Control-Allow-Origin: *

这是hunky-dory。

So that is hunky-dory.

第二，你是从文件运行这个文件： origin？这不工作在Chrome（我认为这将工作在Firefox，但也许这是改变）。您必须从 http：或 https：起源运行它。

Second, are you running this from a file: origin? That doesn't work on Chrome (I thought it would work on Firefox, but maybe that's changed). You have to run it from an http: or https: origin.

从文件运行：origin我的意思是，运行该Javascript的HTML文件是从带有file：的URL加载的。如果是这样，这不太可能工作。

By "running from an file: origin" I mean, is the HTML file that is running that Javascript being loaded from an URL that beings with "file:". If so, that is not likely to work.

这篇关于CORS标头用于访问另一个域上的文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！