Nulla di origine non è consentito da Access-Control-Allow-Origin

Ho creato un piccolo file xslt per creare un output html chiamato weather.xsl con il codice come segue:

<!-- DWXMLSource="http://weather.yahooapis.com/forecastrss?w=38325&u=c" -->
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
exclude-result-prefixes="yweather"
xmlns:yweather="http://xml.weather.yahoo.com/ns/rss/1.0" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#">
<xsl:output omit-xml-declaration="yes" indent="yes"/>
<xsl:strip-space elements="*"/>

<xsl:template match="/">
    <img src="{/*/*/item/yweather:condition/@text}.jpg"/>
</xsl:template>
</xsl:stylesheet>

Voglio caricare l'output html in un div in un file html che sto cercando di fare usando jQuery come segue:

<div id="result">
<script type="text/javascript">
$('#result').load('weather.xsl');
</script>
</div>

Ma sto ottenendo il seguente errore: Origin null non è consentito da Access-Control-Allow-Origin.

Ho letto sull'aggiunta di un'intestazione a xslt, ma non sono sicuro di come farlo, quindi qualsiasi aiuto sarebbe apprezzato, e se il caricamento nell'output html non può essere fatto in questo modo, quindi consigli su come altrimenti farlo sarebbe fantastico.

Origin nullè il file system locale, quindi ciò suggerisce che stai caricando la pagina HTML che effettua la loadchiamata tramite un file:///URL (ad esempio, basta fare doppio clic su di esso in un browser di file locale o simile). Browser diversi adottano approcci diversi per applicare la stessa politica di origine ai file locali.

La mia ipotesi è che stai vedendo questo utilizzando Chrome. Le regole di Chrome per l'applicazione di SOP ai file locali sono molto rigide, non consente nemmeno il caricamento di file dalla stessa directory del documento. Anche Opera. Alcuni altri browser, come Firefox, consentono un accesso limitato ai file locali. Fondamentalmente, l'utilizzo di Ajax con risorse locali non funzionerà su più browser.

Se stai solo testando qualcosa a livello locale che distribuirai davvero sul Web, anziché utilizzare file locali, installa un semplice server Web e prova http://invece tramite URL. Questo ti dà un'immagine di sicurezza molto più accurata.

Chrome e Safari hanno una limitazione all'uso di Ajax con risorse locali. Ecco perché sta generando un errore del genere

Nulla di origine non è consentito da Access-Control-Allow-Origin.

Soluzione: utilizzare firefox o caricare i dati su un server temporaneo. Se desideri comunque utilizzare Chrome, avvialo con l'opzione seguente;

--allow-file-access-from-files

Maggiori informazioni su come aggiungere il parametro sopra a Chrome: fai clic con il pulsante destro del mouse sull'icona di Chrome sulla barra delle applicazioni, fai clic con il pulsante destro del mouse su Google Chrome nella finestra a comparsa e fai clic su Proprietà e aggiungi il parametro sopra nella casella di testo Destinazione nella scheda Collegamento. Sarà come sotto;

C:\Users\XXX_USER\AppData\Local\Google\Chrome\Application\chrome.exe --allow-file-access-from-files

Spero che questo possa aiutare!

Volevo solo aggiungere che la risposta "esegui un server web" sembra abbastanza scoraggiante, ma se hai Python sul tuo sistema (installato di default almeno su MacOS e qualsiasi distribuzione Linux) è facile come:

python -m http.server  # with python3

o

python -m SimpleHTTPServer  # with python2

Quindi se hai il tuo file html myfile.htmlin una cartella, per esempio mydir, tutto ciò che devi fare è:

cd /path/to/mydir
python -m http.server  # or the python2 alternative above

Quindi punta il tuo browser a:

http://localhost:8000/myfile.html

E il gioco è fatto! Funziona su tutti i browser , senza disabilitare la sicurezza Web, consentire i file locali o anche riavviare il browser con le opzioni della riga di comando.

Vorrei aggiungere umilmente che secondo questa fonte SO: https://stackoverflow.com/a/14671362/1743693 , questo tipo di problema è ora parzialmente risolto semplicemente usando le seguenti istruzioni jQuery:

<script> 
    $.support.cors = true;
</script>

L'ho provato su IE10.0.9200 e ha funzionato immediatamente (usando jquery-1.9.0.js).

Su Chrome 28.0.1500.95 - questa istruzione non funziona (questo accade dappertutto poiché David si lamenta nei commenti al link sopra)

Eseguire Chrome con --allow-file-access-from-files non ha funzionato per me (come affermato da Maistora sopra)

Aggiungendo un po 'per usare la soluzione di Gokhan per usare:

--allow-file-access-from-files

Ora devi solo aggiungere il testo sopra nel testo Target seguito da uno spazio. assicurati di chiudere tutte le istanze del browser Chrome dopo aver aggiunto la proprietà sopra. Ora riavvia Chrome dall'icona in cui hai aggiunto questa proprietà. Dovrebbe funzionare per tutti.

Stavo cercando una soluzione per fare una richiesta XHR a un server da un file html locale e ho trovato una soluzione usando Chrome e PHP. (no Jquery)

javascript:

var x = new XMLHttpRequest(); 
if(x) x.onreadystatechange=function(){ 
    if (x.readyState === 4 && x.status===200){
        console.log(x.responseText); //Success
    }else{ 
        console.log(x); //Failed
    }
};
x.open(GET, 'http://example.com/', true);
x.withCredentials = true;
x.send();

Intestazione richiesta del mio Chrome Origin: null

La mia intestazione di risposta PHP (nota che 'null' è una stringa ). HTTP_REFERER consente l'origine incrociata da un server remoto a un altro.

header('Access-Control-Allow-Origin: '.(trim($_SERVER['HTTP_REFERER'],'/')?:'null'),true);
header('Access-Control-Allow-Credentials:true',true);

Sono stato in grado di connettermi con successo al mio server. Puoi ignorare le intestazioni delle Credenziali, ma questo funziona per me con Apache AuthType Basicabilitato

Ho testato la compatibilità con FF e Opera, funziona in molti casi come:

Da un IP LAN VM (192.168.0.x) di nuovo all'IP WAN (pubblico) della VM: porta
Da un IP LAN VM a un nome di dominio del server remoto.
Da un file .HTML locale all'IP LAN VM e / o IP WAN VM: porta,
Da un file .HTML locale a un nome di dominio del server remoto.
E così via.

Puoi caricare un file Javascript locale (nella struttura sotto la tua file:/pagina di origine) usando il tag source:

<script src="my_data.js"></script>

Se codifichi il tuo input in Javascript, come in questo caso:

mydata.js :

$xsl_text = "<xsl:stylesheet version="1.0" + ....

(questo è più facile per JSON), allora hai i tuoi 'dati' in una variabile globale Javascript da usare come desideri.