XmlHttpRequest de error: Origen nulo no está permitido por Access-Control-Allow-Origen

StackOverflow https://stackoverflow.com/questions/3595515

Pregunta

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

El lado Flickr está trabajando muy bien, pero cuando trato de $.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 . nula origen no está permitido por Access-Control-Allow-Origin.

Si consulta que el URL desde un navegador directamente funciona bien. Lo que está pasando, y puedo evitar esto? Estoy componiendo mi consulta de forma incorrecta, o se trata de algo que hace Panoramio obstaculizar lo que estoy tratando de hacer?

Google no se presentó ninguna coincidencia útiles en la mensaje de error .

Editar

Aquí hay un código de ejemplo 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.

EDIT 2

Gracias a Darin por su ayuda con esto. CÓDIGO DE ARRIBA ES INCORRECTO Use este 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...
  });
});
¿Fue útil?

Solución

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

  1. No estabas pasando un "jsonp" especificador de tipo a su $.get, por lo que se utiliza un XMLHttpRequest ordinaria. CORS Sin embargo, su navegador compatible (uso compartido de recursos de origen cruzado) para permitir XMLHttpRequest entre dominios si el servidor OKed ella. Ahí es donde la cabecera Access-Control-Allow-Origin entró.

  2. Creo que usted ha mencionado que se estaba ejecutando desde una URL file: //. Hay dos maneras para que los encabezados CORS para señalar que un XHR entre dominios está bien. Una de ellas es para enviar Access-Control-Allow-Origin: * (que, si llegaban a través de Flickr $.get, deben haber estado haciendo), mientras que el otro era un eco de vuelta el contenido de la cabecera Origin. Sin embargo, las direcciones URL file:// producen una Origin nulo que no puede ser autorizado a través de eco-back.

La primera fue resuelto de una manera indirecta por la sugerencia de Darin para uso $.getJSON. Se hace un poco de magia para cambiar el tipo de solicitud de su valor predeterminado de "json" a "jsonp" si se ve la callback=? subcadena en la URL.

Eso resolvió el segundo al dejar de intentar realizar una CORS solicitud de un URL file://.

Para aclarar para otras personas, aquí están las instrucciones para solucionar problemas simples:

  1. Si usted está tratando de utilizar JSONP, asegúrese de que uno de los siguientes es el caso:
    • Usted está utilizando $.get y conjunto dataType a jsonp.
    • Usted está utilizando $.getJSON y callback=? incluido en la URL.
  2. Si usted está tratando de hacer un XMLHttpRequest entre dominios a través de CORS ...
    1. Asegúrese de que está probando a través de http://. Secuencias que se ejecutan a través de file:// tienen compatibilidad limitada con CORS.
    2. Asegúrese de que el navegador realmente apoya CORS . (Opera e Internet Explorer son tarde a la fiesta)

Otros consejos

Es necesario añadir tal vez un encabezado en su llamada escritura, esto es lo que tenía que hacer en PHP: 

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

Más detalles en servicios a través de dominios AJAX ou WEB (en francés).

Para un proyecto simple del HTML: 

cd project
python -m SimpleHTTPServer 8000

A continuación, busque el archivo.

Obras para mí en Google Chrome v5.0.375.127 (me da 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 utilizando el método $.getJSON() vez 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);
});

Es posible que probarlo en línea desde aquí .

ACTUALIZACIÓN:

Ahora que ya ha demostrado su código que puede ver el problema con él. Usted está teniendo tanto una función anónima y función en línea, pero ambos serán llamados processImages. Así es como funciona apoyo JSONP de jQuery. Observe cómo estoy definiendo el callback=? por lo que se puede utilizar una función anónima. Usted puede leer más al respecto en la documentación .

Otra observación es que no se debe llamar a eval. El parámetro pasado a la función anónima que ya se analiza en JSON por jQuery.

Mientras el servidor solicitado es compatible con el formato de datos JSON, utilice la interfaz JSONP JSON (relleno). Se le permite hacer solicitudes de dominios externos sin servidores proxy o cosas cabecera de fantasía.

Es la misma política de origen, usted tiene que utilizar una interfaz JSON-P o un proxy que se ejecutan en el mismo host.

Lo hemos conseguido a través del archivo http.conf (editado y luego se reinicia 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 "*", se puede poner una URL precisa.

Si usted está haciendo la prueba local o llamando al archivo de algo así como file:// entonces usted necesita para desactivar la seguridad del navegador.

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

En mi caso, el mismo código funciona bien en Firefox, pero no en Google Chrome. consola de 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 dejar la parte de la URL www Ajax para que ésta coincida correctamente con la URL de origen y funcionó bien entonces.

No todos los servidores soportan jsonp. Se requiere que el servidor para establecer la función de devolución de llamada es resultados. Lo utilizo para obtener respuestas de JSON sitios que devuelven JSON pura, pero no son compatibles con 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 servidor Apache, por lo que he usado módulo mod_proxy. Habilitar módulos: 

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

A continuación, añadir: 

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

Por último, pasar proxy-url para su guión.

Como nota final dice explícitamente el href="https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS?redirectlocale=en-US&redirectslug=HTTP_access_control" rel="nofollow"> documentación que

  

El ejemplo anterior fallaría si la cabecera se comodín como:    Access-Control-Allow-Origen:. * Desde el Access-Control-Allow-Origen menciona explícitamente http: / /foo.example ,   el contenido de credenciales-consciente se devuelve a la web invocación   contenido.

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

También tengo el mismo error en Chrome (no he probado otros navegadores). Fue debido al hecho de que yo navegaba en lugar de domain.com www.domain.com. Un poco extraño, pero yo podría resolver el problema añadiendo las líneas siguientes a .htaccess. Se vuelve a dirigir a domain.com www.domain.com y el problema se solucionó. Soy un visitante de la web perezoso así que casi nunca se escriba el www pero al parecer en algunos casos se requiere. 

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

Asegúrese de que está utilizando la última versión de jQuery. Estábamos frente a este error para jQuery 1.10.2 y el error se resolvió después de usar jQuery 1.11.1

La gente,

me encontré con un problema similar. Pero el uso de Fiddler, yo era capaz de conseguir en el tema. El problema es que la URL cliente que está configurado en la aplicación CORS en el lado de la API Web no debe tener una detrás de barra diagonal. Después de enviar su solicitud a través de Google Chrome e inspeccione el Vista de Texto del Conectores de Fiddler, el mensaje de error indica algo como esto:

* "El origen your_client_url política especificada:.. /' No es válido No puede terminar con una barra inclinada"

Esto es peculiar real porque funcionaba sin problemas en Internet Explorer, pero me dio un dolor de cabeza cuando se prueba a través de Google Chrome.

Me quita la barra diagonal en el código CORS y volver a compilar el API de Web, y ahora la API es accesible a través de Chrome e Internet Explorer sin ningún problema. Por favor, dar a este un tiro.

Gracias, Andy

Hay un pequeño problema en la solución publicada por encima CodeGroover , donde si se cambia un archivo, se le tenga que reiniciar el servidor para utilizar realmente el archivo actualizado (al menos, en mi caso).

Por lo que buscar un poco, me encontré éste uso Para: 

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

Y luego se servirá en http://localhost:8000.

Para PHP - este trabajo 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 los servicios en vivo axios llamada PHP con file: //

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top