Errore jQuery xml "Nessuna intestazione" Access-Control-Allow-Origin "presente sulla risorsa richiesta."

Sto lavorando a questo mio progetto personale solo per divertimento in cui voglio leggere un file xml che si trova su http://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xml e analizzare l'xml e usalo per convertire i valori tra le valute.

Finora ho escogitato il codice di seguito che è piuttosto semplice per leggere l'xml ma ottengo il seguente errore.

XMLHttpRequest non può caricare ****. Nessuna intestazione "Access-Control-Allow-Origin" è presente sulla risorsa richiesta. L'accesso a Origin " http://run.jsbin.com " non è pertanto consentito.

$(document).ready( 
    function() {     
        $.ajax({          
            type:  'GET',
            url:   'http://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xml',
            dataType: 'xml',              
            success: function(xml){
                alert('aaa');
            }
         });
    }
);

Non vedo nulla di sbagliato nel mio codice, quindi spero che qualcuno possa indicare cosa sto facendo di sbagliato con il mio codice e come potrei risolverlo.

Non sarai in grado di effettuare una chiamata ajax http://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xmlda un file distribuito a a http://run.jsbin.comcausa della politica della stessa origine .

Poiché la pagina di origine (ovvero l' origine ) e l' URL di destinazione si trovano in domini diversi ( run.jsbin.come www.ecb.europa.eu), il codice sta effettivamente tentando di effettuare una richiesta Cross-domain (CORS) , non ordinaria GET.

In poche parole, la politica della stessa origine afferma che i browser dovrebbero consentire solo le chiamate ajax ai servizi nello stesso dominio della pagina HTML.

Esempio:

Una pagina su http://www.example.com/myPage.htmlpuò richiedere direttamente solo servizi che si trovano in http://www.example.com, come http://www.example.com/api/myService. Se il servizio è ospitato in un altro dominio (ad esempio http://www.ok.com/api/myService), il browser non effettuerà la chiamata direttamente (come ci si aspetterebbe). Invece, proverà a fare una richiesta CORS.

In breve, per eseguire una richiesta (CORS) * su diversi domini, il tuo browser:

• Includerà Originun'intestazione nella richiesta originale (con il dominio della pagina come valore) e la eseguirà come al solito; e poi
• Solo se la risposta del server a tale richiesta contiene le intestazioni adeguate ( Access-Control-Allow-Originè una di queste ) che consente la richiesta CORS, la navigazione completerà la chiamata (quasi ** esattamente come sarebbe se la pagina HTML fosse nello stesso dominio).
  • Se le intestazioni previste non vengono visualizzate, il browser si arrende semplicemente (come ha fatto a te).

_{* Quanto sopra descrive i passaggi in una semplice richiesta, come un normale GETsenza intestazioni di fantasia. Se la richiesta non è semplice (come un POSTcon application/jsontipo di contenuto), il browser la tratterrà per un momento e, prima di soddisfarla, invierà prima una OPTIONSrichiesta all'URL di destinazione. Come sopra, continuerà solo se la risposta a questa OPTIONSrichiesta contiene le intestazioni CORS. Questa OPTIONSchiamata è nota come richiesta di verifica preliminare .
** Sto dicendo quasi perché ci sono altre differenze tra le chiamate normali e le chiamate CORS. Un aspetto importante è che alcune intestazioni, anche se presenti nella risposta, non verranno rilevate dal browser se non sono incluseAccess-Control-Expose-Headers nell'intestazione.}

Come sistemarlo?

Era solo un errore di battitura? A volte il codice JavaScript ha solo un errore di battitura nel dominio di destinazione. Hai controllato? Se la pagina è all'indirizzo www.example.com, effettuerà solo chiamate regolari a www.example.com! Altri URL, come api.example.como anche example.como www.example.com:8080sono considerati domini diversi dal browser! Sì, se la porta è diversa, allora è un dominio diverso!

Aggiungi le intestazioni. Il modo più semplice per abilitare CORS è aggiungere le intestazioni necessarie (as Access-Control-Allow-Origin) alle risposte del server. (Ogni server / lingua ha un modo per farlo: controlla alcune soluzioni qui .)

Ultima risorsa: se non si dispone dell'accesso lato server al servizio, è anche possibile eseguirne il mirroring (tramite strumenti come i proxy inversi ) e includere tutte le intestazioni necessarie.

C'è una sorta di modo hack-tastico per farlo se hai abilitato php sul tuo server. Cambia questa riga:

url:   'http://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xml',

a questa riga:

url: '/path/to/phpscript.php',

e poi nello script php (se hai il permesso di usare la funzione file_get_contents ()):

<?php

header('Content-type: application/xml');
echo file_get_contents("http://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xml");

?>

A Php non sembra importare se quell'URL proviene da un'origine diversa. Come ho detto, questa è una risposta hacky, e sono sicuro che ci sia qualcosa che non va, ma per me funziona.

Modifica: se vuoi memorizzare nella cache il risultato in php, ecco il file php che useresti:

<?php

$cacheName = 'somefile.xml.cache';
// generate the cache version if it doesn't exist or it's too old!
$ageInSeconds = 3600; // one hour
if(!file_exists($cacheName) || filemtime($cacheName) > time() + $ageInSeconds) {
  $contents = file_get_contents('http://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xml');
  file_put_contents($cacheName, $contents);
}

$xml = simplexml_load_file($cacheName);

header('Content-type: application/xml');
echo $xml;

?>

Il codice di memorizzazione nella cache prende da qui .