javascript - headers - Posible problema CORS. ¿Qué está pasando y cómo puedo solucionarlo?

falta la cabecera cors ''access-control-allow-origin'' angular

Question

Estoy accediendo a un servicio web REST, utilizando una solicitud asincrónica para cargar datos de consulta. Cuando ejecuto el mismo código en un servidor diferente (por ejemplo, desarrollo localmente y luego visito una versión en vivo en la web), la solicitud de AJAX fallará. Borre la caché, actualice la página y funcionará.

El error que obtengo (copiar / pegar desde la consola de Chrome, también sucede en FF) cuando falla es:

XMLHttpRequest cannot load http://www.flymine.org/query/service/model?format=json. The ''Access-Control-Allow-Origin'' header has a value ''http://fiddle.jshell.net'' that is not equal to the supplied origin. Origin ''http://null.jsbin.com'' is therefore not allowed access. im.js:129
Uncaught TypeError: Cannot read property ''content-type'' of undefined http://www.flymine.org/query/service/summaryfields?format=json.
The ''Access-Control-Allow-Origin'' header has a value ''http://fiddle.jshell.net'' that is not equal to the supplied origin.  
 Origin ''http://null.jsbin.com'' is therefore not allowed access. im.js:129 
 Uncaught TypeError: Cannot read property ''content-type'' of undefined

Esto es bastante fácil de reproducir:

1. Visite el código en un servidor (JSBin) . Debería obtener resultados satisfactorios que indiquen la cantidad de exones que devolvió la consulta.
2. Visite el mismo código en un servidor diferente (JSFiddle) . Si usa Chrome, asegúrese de que sus herramientas de desarrollador estén cerradas, ya que tienden a borrar el caché y pueden evitar que ocurra el error. El panel de salida debe mostrar un error, hasta que borre la memoria caché y ejecute de nuevo jsfiddle.

Estoy bastante seguro de que hay algo que CORS-ey está sucediendo que necesito habilitar, pero no estoy del todo seguro de lo que podría ser. Tengo acceso para modificar los encabezados del servidor, etc., según sea necesario para evitar este problema.

Hay una biblioteca, IMJS , que hace la mayor parte del trabajo para la comunicación, pero aquí está el código básico para la conexión:

  var flymine   = new imjs.Service({root: ''www.flymine.org/query''});
  var query     = {
    from: ''Gene'',
    select: [
      ''exons.symbol'',
      ''chromosome.primaryIdentifier'',
      ''exons.chromosomeLocation.start'',
      ''exons.chromosomeLocation.end''
    ],
    where: {
      symbol: ''eve'',
      organism: {lookup: ''D. melanogaster''}}
  };
  flymine.rows(query).then(function(rows) {
    console.log("No. of exons: " + rows.length);
    rows.forEach(function printRow(row) {
      console.log("[" + row[0] + "] " + row[1] + ":" + row[2] + ".." + row[3]);
    });
  });

Answer 1

El mensaje de error explica el problema para usted:

XMLHttpRequest no puede cargar http://www.flymine.org/query/service/model?format=json .

El servidor al que intenta acceder es www.flymine.org

El encabezado ''Access-Control-Allow-Origin'' tiene un valor '' http://fiddle.jshell.net ''

www.flymine.org dice que http://fiddle.jshell.net tiene permiso para leer los datos del mismo.

www.flymine.org hace esto colocando un encabezado Access-Control-Allow-Origin en la respuesta.

eso no es igual al origen proporcionado. El origen '' http://null.jsbin.com '' no está, por lo tanto, permitido. im.js: 129

Está realizando la solicitud desde http://null.jsbin.com y no desde http://fiddle.jshell.net .

Necesita cambiar www.flymine.org para que le dé permiso a http://null.jsbin.com .