Pregunta Error de XmlHttpRequest: Access-Control-Allow-Origin no permite el origen nulo


Estoy desarrollando una página que extrae imágenes de Flickr y Panoramio a través del soporte AJAX de jQuery.

El lado de Flickr está funcionando bien, pero cuando intento $.get(url, callback) de Panoramio, veo un error en la consola de Chrome:

XMLHttpRequest no se puede cargar http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=processImages&minx=-30&miny=0&maxx=0&maxy=150. El nulo de origen no está permitido por Access-Control-Allow-Origin.

Si consulto esa URL desde un navegador directamente, funciona bien. ¿Qué está pasando, y puedo evitar esto? ¿Estoy redactando mi consulta de forma incorrecta, o es algo que hace Panoramio para obstaculizar lo que estoy tratando de hacer?

Google no encontró ninguna coincidencia útil en el mensaje de error.

EDITAR

Aquí hay un código de muestra que muestra el problema:

$().ready(function () {
  var url = 'http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=processImages&minx=-30&miny=0&maxx=0&maxy=150';

  $.get(url, function (jsonp) {
    var processImages = function (data) {
      alert('ok');
    };

    eval(jsonp);
  });
});

Usted puede ejecuta el ejemplo en línea.

EDIT 2

Gracias a Darin por su ayuda con esto. EL CÓDIGO ANTERIOR ES INCORRECTO.  Use esto en su lugar:

$().ready(function () {
  var url = 'http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&minx=-30&miny=0&maxx=0&maxy=150&callback=?';

  $.get(url, function (data) {
    // can use 'data' in here...
  });
});

506
2017-08-29 16:12


origen


Respuestas:


Para el registro, por lo que puedo decir, usted tenía dos problemas:

  1. No estaba pasando un especificador de tipo "jsonp" a su $.get, así que estaba usando un XMLHttpRequest ordinario. Sin embargo, su navegador admite CORS (Intercambio de recursos de origen cruzado) para permitir XMLHttpRequest entre dominios si el servidor lo ha activado. Ahí es donde el Access-Control-Allow-Origin encabezado entró.

  2. Creo que mencionaste que lo estabas ejecutando desde un archivo: // URL. Hay dos formas en que los encabezados CORS señalan que un XHR entre dominios es correcto. Una es enviar Access-Control-Allow-Origin: * (que, si estuvieras llegando a Flickr por $.get, deben haber estado haciendo) mientras que el otro era repetir el contenido de la Origin encabezamiento. Sin embargo, file:// Las URL producen un nulo Origin que no se puede autorizar a través de eco-back.

El primero se resolvió de forma indirecta mediante la sugerencia de Darin de usar $.getJSON. Hace un poco de magia cambiar el tipo de solicitud de su valor predeterminado de "json" a "jsonp" si ve la subcadena callback=? en la URL

Eso resolvió el segundo porque ya no intentaba realizar una solicitud CORS de un file:// URL.

Para aclarar a otras personas, estas son las instrucciones simples de solución de problemas:

  1. Si intenta usar JSONP, asegúrese de que uno de los siguientes sea el caso:
    • Estás usando $.get y establecer dataType a jsonp.
    • Estás usando $.getJSON e incluido callback=? en la URL
  2. Si está intentando hacer un XMLHttpRequest entre dominios a través de CORS ...
    1. Asegúrate de que estás probando a través de http://. Scripts ejecutados a través de file:// tiene soporte limitado para CORS.
    2. Asegúrate de que el navegador en realidad es compatible con CORS. (Opera e Internet Explorer llegan tarde a la fiesta)

409
2017-09-19 06:06



Es posible que necesites agregar una HEADER en tu script llamado, esto es lo que tuve que hacer en PHP:

header('Access-Control-Allow-Origin: *');

Más detalles en Cross domain AJAX ou services WEB (en francés).


73
2018-02-11 10:59



Para un proyecto HTML simple:

cd project
python -m SimpleHTTPServer 8000

Luego busca tu archivo.


66
2018-03-07 15:49



Funciona para mí en Google Chrome v5.0.375.127 (recibo la alerta):

$.get('http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=?&minx=-30&miny=0&maxx=0&maxy=150',
function(json) {
    alert(json.photos[1].photoUrl);
});

También te recomendaría que uses el $.getJSON() método en su lugar, ya que el anterior no funciona en IE8 (al menos en mi máquina):

$.getJSON('http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=?&minx=-30&miny=0&maxx=0&maxy=150', 
function(json) {
    alert(json.photos[1].photoUrl);
});

Puedes intentarlo en línea desde aquí.


ACTUALIZAR:

Ahora que has mostrado tu código, puedo ver el problema con él. Está teniendo una función anónima y una función en línea, pero se llamarán ambas processImages. Así es como funciona el soporte JSONP de jQuery. Observe cómo estoy definiendo el callback=? para que pueda usar una función anónima. Puede leer más al respecto en la documentación.

Otra observación es que no debes llamar a eval. El parámetro pasado a su función anónima ya será analizado en JSON por jQuery.


19
2017-08-29 16:14



Siempre que el servidor solicitado sea compatible con el formato de datos JSON, use la interfaz JSONP (JSON Padding). Le permite realizar solicitudes de dominio externo sin servidores proxy o elementos de cabecera de fantasía.


8
2018-05-06 16:27



Lo logramos a través del http.conf archivo (editado y luego reiniciado el servicio HTTP):

<Directory "/home/the directory_where_your_serverside_pages_is">
    Header set Access-Control-Allow-Origin "*"
    AllowOverride all
    Order allow,deny
    Allow from all
</Directory>

En el Header set Access-Control-Allow-Origin "*", puedes poner una URL precisa.


5
2017-07-29 18:58



Es el misma política de origen, debe usar una interfaz JSON-P o un proxy que se ejecute en el mismo host.


4
2017-08-29 16:15



Si está realizando pruebas locales o llamando al archivo desde algo como file:// entonces necesita deshabilitar la seguridad del navegador.

En MAC: open -a Google\ Chrome --args --disable-web-security


4
2017-08-20 18:35