XmlHttpRequest errore: null Origin non è consentita da Access-Control-Allow-Origin

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

Domanda

sto sviluppando una pagina che tira le immagini da Flickr e Panoramio tramite supporto AJAX jQuery.

Il lato Flickr sta funzionando benissimo, ma quando provo a $.get(url, callback) da Panoramio, vedo un errore nella console di Chrome:

  

XMLHttpRequest non può caricare 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 . nulla Origin non è consentita da Access-Control-Allow-Origin.

Se io query che l'URL da un browser direttamente funziona benissimo. Che cosa sta succedendo, e posso ottenere intorno a questo? Am I componendo la mia domanda in modo errato, o si tratta di qualcosa che fa Panoramio ostacolare quello che sto cercando di fare?

Google non si presentò alcuna corrispondenza utili sul messaggio di errore .

Modifica

Ecco alcuni esempi di codice che mostra il 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);
  });
});

È possibile eseguire l'esempio in linea .

Modifica 2

Grazie a Darin per il suo aiuto con questo. SOPRA codice è errato Usa questo, invece:. 

$().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...
  });
});
È stato utile?

Soluzione

Per la cronaca, per quanto posso dire, hai avuto due problemi:

  1. Non stavamo passando un "jsonp" indicatore di tipo al vostro $.get, in modo che stava usando un XMLHttpRequest ordinario. CORS Tuttavia, il browser supportato (Resource di condivisione Cross-Origin) per consentire tra domini XMLHttpRequest se il server OKed esso. Ecco dove l'intestazione Access-Control-Allow-Origin entrò.

  2. Credo che lei ha citato si stesse eseguendo da un file: // URL. Ci sono due modi per CORS intestazioni per segnalare che una XHR tra domini è OK. Uno è quello di trasmettere Access-Control-Allow-Origin: * (che, se si stavano raggiungendo Flickr tramite $.get, devono essere state facendo), mentre l'altro era l'eco di nuovo il contenuto della intestazione Origin. Tuttavia, gli URL file:// producono un Origin nullo che non possono essere autorizzati tramite eco-back.

Il primo è stato risolto in modo indiretto per suggestione di Darin all'uso $.getJSON. Si fa un po 'di magia per cambiare il tipo di richiesta dal valore predefinito di "JSON" a "jsonp" se vede la callback=? sottostringa nell'URL.

Che ha risolto il secondo cercando non è più necessario eseguire un CORS richiesta da un URL file://.

Per chiarire per gli altri, qui ci sono le semplici istruzioni di risoluzione dei problemi:

  1. Se stai cercando di utilizzare JSONP, assicurarsi uno dei seguenti è il caso:
    • Stai utilizzando $.get e insieme dataType a jsonp.
    • Stai usando $.getJSON e callback=? incluso nella URL.
  2. Se si sta cercando di fare un XMLHttpRequest cross-domain via CORS ...
    1. Assicurarsi che si sta testando via http://. Gli script che eseguono tramite file:// hanno un supporto limitato per CORS.
    2. Assicurati che il browser supporta in realtà CORS . (Opera e Internet Explorer sono in ritardo alla festa)

Altri suggerimenti

È necessario aggiungere forse un colpo di testa nella vostra chiamata copione, ecco quello che ho dovuto fare in PHP: 

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

Maggiori dettagli in Croce dominio AJAX ou servizi WEB (in francese).

Per un progetto semplice HTML: 

cd project
python -m SimpleHTTPServer 8000

Quindi, individuare il file.

Opere per me su Google Chrome v5.0.375.127 (ottengo l'avviso): 

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

Anche io consiglierei di utilizzare il metodo $.getJSON() invece come il precedente non funziona su IE8 (almeno sulla mia macchina): 

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

Si può provare online da qui .

UPDATE:

Ora che avete mostrato il codice che può vedere il problema con esso. Si stanno avendo sia una funzione anonima e funzione inline ma entrambi sarete chiamati processImages. Ecco come funziona di supporto JSONP di jQuery. Avviso come sto definendo la callback=? in modo che è possibile utilizzare una funzione anonima. Si può leggere di più su di esso nella documentazione .

Un'altra osservazione è che non si dovrebbe chiamare eval. Il parametro passato alla funzione anonima sarà già analizzato in JSON con jQuery.

Fino a quando il server richiesto supporta il formato dei dati JSON, utilizzare l'interfaccia JSONP (JSON imbottitura). Esso consente di effettuare le richieste di dominio esterni senza server proxy o roba intestazione di fantasia.

E 'il stessa politica di origine , è necessario utilizzare un'interfaccia JSON-P o un proxy in esecuzione sullo stesso host.

Ci siamo riusciti tramite il file http.conf (a cura e quindi riavviato il servizio 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>

Nel Header set Access-Control-Allow-Origin "*", si può mettere un URL preciso.

Se si sta facendo test locale o chiamando il file da qualcosa come file:// allora avete bisogno di disabilitare la sicurezza del browser.

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

Nel mio caso, lo stesso codice ha funzionato bene su Firefox, ma non su Google Chrome. console JavaScript di Google Chrome ha detto: 

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"

Ho dovuto lasciare la parte www del Ajax URL per essere trovato in modo corretto con l'URL di origine e ha funzionato bene quindi.

Non tutti i server supportano jsonp. Si richiede il server per impostare la funzione di callback in essa di risultati. Io lo uso per ottenere JSON risposte da siti che restituiscono JSON puro, ma non supportano 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;
    });
}

Io uso server Apache, quindi ho usato il modulo mod_proxy. Abilita moduli: 

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

Quindi aggiungere: 

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

Infine, passare proxy-url per lo script.

Come nota finale la documentazione Mozilla dice esplicitamente che

  

L'esempio precedente fallirebbe se il colpo di testa viene caratteri jolly come:    Access-Control-Allow-Origin:. * Dal momento che l'Access-Control-Allow-Origin menziona esplicitamente http: / /foo.example ,   il contenuto delle credenziali-consapevole viene restituito l'invocazione web   contenuti.

Come conseguenza è una non è semplicemente una cattiva pratica di usare '*'. Semplicemente non funziona:)

Inoltre ho ottenuto lo stesso errore in Chrome (non ho la prova altri browers). E 'stato dovuto al fatto che stavo navigando su domain.com invece di www.domain.com. Un po 'strano, ma ho potuto risolvere il problema aggiungendo le seguenti righe al file .htaccess. Si reindirizza domain.com al www.domain.com e il problema è stato risolto. Sono un web visitatore pigro quindi ho quasi mai digitare il www ma a quanto pare, in alcuni casi esso è necessario. 

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

Assicurarsi che si sta utilizzando l'ultima versione di jQuery. Eravamo di fronte questo errore per JQuery 1.10.2 e l'errore siamo decisi dopo l'utilizzo di jQuery 1.11.1

La gente,

mi sono imbattuto in un problema simile. Ma usando Fiddler, sono stato in grado di ottenere la questione. Il problema è che l'URL client configurato per l'attuazione CORS sul lato Web API non deve avere un trailing slash. Dopo aver inviato la richiesta tramite Google Chrome e ispezionare il TextView del Intestazioni del Fiddler, il messaggio di errore indica qualcosa di simile:

* "La specificato your_client_url origine politica:.. /' Non è valido Non può finire con una barra"

Questa è la vera eccentrico perché ha funzionato senza problemi in Internet Explorer, ma mi ha dato un mal di testa durante la prova utilizzando Google Chrome.

Ho rimosso il forward-slash nel codice CORS e ricompilato l'API Web, e ora l'API è accessibile tramite Chrome e Internet Explorer senza problemi. Si prega di dare a questo un colpo.

Grazie, Andy

C'è un piccolo problema nella soluzione postato da CodeGroover sopra , dove se si modifica un file, è essere necessario riavviare il server per utilizzare effettivamente il file aggiornato (almeno, nel mio caso).

Quindi, la ricerca di un po ', ho trovato questo Uso A: 

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

E poi servirà a http://localhost:8000.

Per PHP - questo lavoro per me su Chrome, Safari e Firefox

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

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

utilizzando Axios chiamata php servizi in tempo reale con file: //

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top