Errore XmlHttpRequest: Origin null non è consentito da Access-Control-Allow-Origin

Sto sviluppando una pagina che estrae immagini da Flickr e Panoramio tramite il supporto AJAX di jQuery.

La parte di Flickr funziona bene, ma quando provo $.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 . L'origine null non è consentita da Access-Control-Allow-Origin.

Se eseguo una query dell'URL direttamente da un browser, funziona perfettamente. Cosa sta succedendo e posso aggirare questo? Sto componendo la mia domanda in modo errato, o è qualcosa che Panoramio fa per ostacolare ciò che sto cercando di fare?

Google non ha mostrato alcuna corrispondenza utile sul messaggio di errore .

MODIFICARE

Ecco un codice di esempio 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);
  });
});

Puoi eseguire l'esempio online .

MODIFICA 2

Grazie a Darin per il suo aiuto in questo. IL CODICE SOPRA È 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...
  });
});

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

1. Non stavi passando un identificatore di tipo "jsonp" al tuo $.get, quindi utilizzava un normale XMLHttpRequest. Tuttavia, il tuo browser supporta CORS (Cross-Origin Resource Sharing) per consentire XMLHttpRequest tra domini se il server lo ha OK. Ecco dove è Access-Control-Allow-Originarrivata l' intestazione.

2. Credo che tu abbia detto che lo stavi eseguendo da un file: // URL. Esistono due modi per le intestazioni CORS per segnalare che un XHR tra domini è OK. Uno è quello di inviare Access-Control-Allow-Origin: *(che, se stavate raggiungendo Flickr tramite $.get, dovevano averlo fatto) mentre l'altro doveva ripetere il contenuto Origindell'intestazione. Tuttavia, gli file://URL producono un valore nullo Originche non può essere autorizzato tramite eco-back.

Il primo è stato risolto in modo circolare dal suggerimento di Darin di utilizzare $.getJSON. Fa un po 'di magia cambiare il tipo di richiesta dal suo valore predefinito di "json" a "jsonp" se vede la sottostringa callback=?nell'URL.

Ciò ha risolto il secondo non tentando più di eseguire una richiesta CORS da un file://URL.

Per chiarire altre persone, ecco le semplici istruzioni per la risoluzione dei problemi:

1. Se stai tentando di utilizzare JSONP, assicurati che si verifichi una delle seguenti situazioni:
   • Stai utilizzando $.gete impostato dataTypesu jsonp.
   • Stai utilizzando $.getJSONe incluso callback=?nell'URL.
2. Se stai cercando di eseguire una richiesta XMLHttp tra domini tramite CORS ...
   1. Assicurati di provare tramite http://. Gli script eseguiti tramite file://hanno un supporto limitato per CORS.
   2. Assicurarsi che il browser supporti effettivamente CORS . (Opera e Internet Explorer sono in ritardo alla festa)

Forse devi aggiungere un HEADER nel tuo script chiamato, ecco cosa dovevo fare in PHP:

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

Maggiori dettagli in Servizi di domini AJAX o WEB WEB (in francese).

Per un semplice progetto HTML:

cd project
python -m SimpleHTTPServer 8000

Quindi sfoglia il tuo file.

Funziona per me su Google Chrome v5.0.375.127 (ricevo 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);
});

Inoltre, ti consiglio di utilizzare il $.getJSON()metodo, poiché 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);
});

Puoi provarlo online da qui .

AGGIORNARE:

Ora che hai mostrato il tuo codice posso vedere il problema con esso. Stai avendo sia una funzione anonima che una funzione incorporata ma entrambe verranno chiamate processImages. Ecco come funziona il supporto JSONP di jQuery. Si noti come sto definendo il callback=?modo che è possibile utilizzare una funzione anonima. Puoi leggere di più al riguardo nella documentazione .

Un'altra osservazione è che non dovresti chiamare eval. Il parametro passato alla funzione anonima verrà già analizzato in JSON da jQuery.

Finché il server richiesto supporta il formato dati JSON, utilizzare l'interfaccia JSONP (JSON Padding). Ti consente di effettuare richieste di dominio esterno senza server proxy o elementi di intestazione elaborati.

È la stessa politica di origine , devi usare un'interfaccia JSON-P o un proxy in esecuzione sullo stesso host.

Lo abbiamo gestito tramite il http.conffile (modificato 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 "*", puoi inserire un URL preciso.

Se stai eseguendo test locali o chiamando il file da qualcosa del genere, file://devi 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. La console JavaScript di Google Chrome ha dichiarato:

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 abbandonare la parte www dell'URL Ajax perché corrispondesse correttamente all'URL di origine e allora ha funzionato bene.

Non tutti i server supportano jsonp. Richiede che il server imposti la funzione di callback nei suoi risultati. Lo uso per ottenere risposte json 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;
    });
}

Uso il 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, passa proxy-url al tuo script.

Come nota finale la documentazione di Mozilla dice esplicitamente che

L'esempio sopra fallirebbe se l'intestazione fosse jolly come: Access-Control-Allow-Origin: *. Poiché Access-Control-Allow-Origin menziona esplicitamente http: //foo.example , il contenuto con cognizione di credenziali viene restituito al contenuto Web invocante.

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

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');

usando axios chiama php live services con file: //

Ho anche avuto lo stesso errore in Chrome (non ho testato altri browser). Era dovuto al fatto che stavo navigando su domain.com anziché su www.domain.com. Un po 'strano, ma ho potuto risolvere il problema aggiungendo le seguenti righe a .htaccess. Reindirizza domain.com a www.domain.com e il problema è stato risolto. Sono un visitatore pigro del web quindi non scrivo quasi mai il www ma a quanto pare in alcuni casi è richiesto.

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

Assicurati di utilizzare l'ultima versione di JQuery. Abbiamo riscontrato questo errore per JQuery 1.10.2 e l'errore è stato risolto dopo l'utilizzo di JQuery 1.11.1

gente,

Ho riscontrato un problema simile. Ma usando Fiddler, sono stato in grado di risolvere il problema. Il problema è che l'URL del client configurato nell'implementazione CORS sul lato dell'API Web non deve presentare una barra rovesciata finale. Dopo aver inviato la tua richiesta tramite Google Chrome e aver ispezionato la scheda TextView della sezione Headers di Fiddler, il messaggio di errore indica qualcosa del genere:

* "L'origine della politica specificata your_client_url: / 'non è valida. Non può terminare con una barra."

Questo è davvero bizzarro perché ha funzionato senza problemi su Internet Explorer, ma mi ha dato un mal di testa durante i test con Google Chrome.

Ho rimosso la barra nel codice CORS e ricompilato l'API Web e ora l'API è accessibile tramite Chrome e Internet Explorer senza problemi. Per favore, prova questo.

Grazie Andy

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

Quindi, cercando un po ', ho trovato questo Per usare:

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

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