Encabezados CORS para acceder a un archivo en otro dominio

Question

Dec 23, 2016, 07:46 PM

cors javascript apache audio http-headers

Encabezados CORS para acceder a un archivo en otro dominio

Estoy intentando crear un programa de visualización de audio en Codepen. He creado mi propio servidor web Ubuntu con apache que me permite acceder directamente para modificar los encabezados y la configuración del servidor.

Si bien los navegadores pueden acceder a archivos en un dominio diferente, se requieren encabezados CORS especiales para leer las frecuencias dentro del audio. Para leer frecuencias de audio, debo usarcreateMediaElementSource para acceder a la información de audio, incluidas las frecuencias. Cuando el navegador ve este método de JavaScript, sabe que debe haber ciertos encabezados configurados en el servidor para permitir el acceso. Lo que nos lleva a los motivos de esta pregunta: ¿qué encabezados deben configurarse?

Todos los navegadores que he probado devuelven una variación de un error CORS. Así es como se ve el error en Firefox, aunque lo he probado en Chrome, Opera y Safari con resultados similares:

Solicitud de origen cruzado bloqueada: la misma política de origen no permite leer el recurso remoto enhttp://williamgreen.hopto.org/audioVisualization/song.mp3. (Motivo: el encabezado CORS "Access-Control-Allow-Origin" no coincide con "(nulo)").

El archivo vuelve206 partial content. Aquí están los encabezados del servidor devueltos (actualmente):Aquí están los encabezados enviados (actualmente):

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);
  });
});