Error 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 funciona bien, pero cuando trato $.get(url, callback)de Panoramio, veo un error en la consola de Chrome:

XMLHttpRequest no 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 origen nulo 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 incorrectamente, o es algo que Panoramio hace para obstaculizar lo que estoy tratando de hacer?

Google no mostró coincidencias útiles 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);
  });
});

Puede ejecutar el ejemplo en línea .

EDITAR 2

Gracias a Darin por su ayuda con esto. EL CÓDIGO ANTERIOR ESTÁ MAL. 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...
  });
});

Para el registro, por lo que puedo decir, tuviste dos problemas:

1. No estaba pasando un especificador de tipo "jsonp" a su $.get, por lo que estaba usando un XMLHttpRequest ordinario. Sin embargo, su navegador admite CORS (Cross-Origin Resource Sharing) para permitir XMLHttpRequest entre dominios si el servidor lo autorizó. Ahí es donde Access-Control-Allow-Originentró el encabezado.

2. Creo que mencionaste que lo estabas ejecutando desde un archivo: // URL. Hay dos formas para que los encabezados CORS indiquen que un XHR de dominio cruzado está bien. Una es enviar Access-Control-Allow-Origin: *(que, si estaba llegando a Flickr a través de $.get, deben haber estado haciendo) mientras que la otra era hacer eco de los contenidos del Originencabezado. Sin embargo, las file://URL producen un valor nulo Originque no se puede autorizar mediante eco-back.

El primero fue resuelto de forma indirecta por 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 al no tratar de realizar una solicitud CORS desde una file://URL.

Para aclarar a otras personas, aquí están las sencillas instrucciones de solución de problemas:

1. Si está intentando usar JSONP, asegúrese de que uno de los siguientes es el caso:
   • Usted está utilizando $.gety establecer dataTypea jsonp.
   • Estás utilizando $.getJSONe incluido callback=?en la URL.
2. Si está intentando hacer una XMLHttpRequest entre dominios a través de CORS ...
   1. Asegúrate de probar a través de http://. Los scripts que se ejecutan a través de file://tienen soporte limitado para CORS.
   2. Asegúrese de que el navegador realmente sea compatible con CORS . (Opera e Internet Explorer llegan tarde a la fiesta)

Quizás necesite agregar un HEADER en su script llamado, esto es lo que tuve que hacer en PHP:

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

Más detalles en Dominio cruzado AJAX o servicios WEB (en francés).

Para un proyecto HTML simple:

cd project
python -m SimpleHTTPServer 8000

Luego busque su archivo.

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 usar el $.getJSON()método, 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);
});

Puede probarlo en línea desde aquí .

ACTUALIZAR:

Ahora que ha mostrado su código, puedo ver el problema con él. Tiene una función anónima y una función en línea, pero ambas serán llamadas 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 .

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

Mientras 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 encabezados sofisticados.

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

Lo gestionamos a través del http.confarchivo (editado y luego reiniciamos 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 "*", puede poner una URL precisa.

Si está haciendo 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

En mi caso, el mismo código funcionó bien en Firefox, pero no en Google Chrome. La consola JavaScript de Google Chrome dijo:

XMLHttpRequest cannot load http://www.xyz.com/getZipInfo.php?zip=11234. 
Origin http://xyz.com is not allowed by Access-Control-Allow-Origin.
Refused to get unsafe header "X-JSON"

Tuve que soltar la parte www de la URL de Ajax para que coincida correctamente con la URL de origen y funcionó bien entonces.

No todos los servidores admiten jsonp. Requiere que el servidor configure la función de devolución de llamada en sus resultados. Lo uso para obtener respuestas json de sitios que devuelven json puro pero no admiten jsonp:

function AjaxFeed(){

    return $.ajax({
        url:            'http://somesite.com/somejsonfile.php',
        data:           {something: true},
        dataType:       'jsonp',

        /* Very important */
        contentType:    'application/json',
    });
}

function GetData() {
    AjaxFeed()

    /* Everything worked okay. Hooray */
    .done(function(data){
        return data;
    })

    /* Okay jQuery is stupid manually fix things */
    .fail(function(jqXHR) {

        /* Build HTML and update */
        var data = jQuery.parseJSON(jqXHR.responseText);

        return data;
    });
}

Yo uso el servidor Apache, así que he usado el módulo mod_proxy. Habilitar módulos:

LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so

Luego añade:

ProxyPass /your-proxy-url/ http://service-url:serviceport/

Finalmente, pase proxy-url a su script.

Como nota final, la documentación de Mozilla dice explícitamente que

El ejemplo anterior fallaría si el encabezado se marcara como: Access-Control-Allow-Origin: *. Como Access-Control-Allow-Origin menciona explícitamente http: //foo.example , el contenido que reconoce las credenciales se devuelve al contenido web que se invoca.

Como consecuencia, no es simplemente una mala práctica usar '*'. Simplemente no funciona :)

Para PHP: esto funciona para mí en Chrome, Safari y Firefox

https://w3c.github.io/webappsec-cors-for-developers/#avoid-returning-access-control-allow-origin-null

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

usando axios llame a php live services con file: //

También recibí el mismo error en Chrome (no probé otros navegadores). Fue debido al hecho de que estaba navegando en domain.com en lugar de www.domain.com. Un poco extraño, pero podría resolver el problema agregando las siguientes líneas a .htaccess. Redirige domain.com a www.domain.com y se solucionó el problema. Soy un visitante web perezoso, por lo que casi nunca escribo el www, pero aparentemente en algunos casos es obligatorio.

RewriteEngine on
RewriteCond %{HTTP_HOST} ^domain\.com$ [NC]
RewriteRule ^(.*)$ http://www.domain.com/$1 [R=301,L]

Asegúrese de estar utilizando la última versión de JQuery. Nos enfrentamos a este error para JQuery 1.10.2 y el error se resolvió después de usar JQuery 1.11.1

Amigos

Me encontré con un problema similar. Pero usando Fiddler, pude llegar al problema. El problema es que la URL del cliente que está configurada en la implementación de CORS en el lado de la API web no debe tener una barra diagonal final. Después de enviar su solicitud a través de Google Chrome e inspeccionar la pestaña TextView de la sección Encabezados de Fiddler, el mensaje de error indica algo como esto:

* "El origen de política especificado your_client_url: / 'no es válido. No puede terminar con una barra diagonal".

Esto es realmente peculiar porque funcionó sin problemas en Internet Explorer, pero me dio dolor de cabeza al probar con Google Chrome.

Eliminé la barra diagonal en el código CORS y volví a compilar la API web, y ahora se puede acceder a la API a través de Chrome e Internet Explorer sin ningún problema. Por favor, dale una oportunidad.

Gracias Andy

Hay un pequeño problema en la solución publicada por CodeGroover arriba , donde si cambia un archivo, tendrá que reiniciar el servidor para usar realmente el archivo actualizado (al menos, en mi caso).

Así que buscando un poco, encontré este para usar:

sudo npm -g install simple-http-server # to install
nserver # to use

Y luego servirá a las http://localhost:8000.