CORS headers for accessing a file on another domain

Question

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.

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?

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:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://williamgreen.hopto.org/audioVisualization/song.mp3. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘(null)’).

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>

What do I need to change to get this working?

Answer 1

My first thought is that the problem is your

Access-Control-Allow-Origin: *, *

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

Edit: 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

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

< Access-Control-Allow-Origin: *

So that is hunky-dory.

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.

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.