XMLHttpRequest Origin null non è consentito Access-Control-Allow-Origin per il file: /// nel file: /// (Serverless)

Sto cercando di creare un sito Web che può essere scaricato ed eseguito localmente avviando il suo file indice.

Tutti i file sono locali, nessuna risorsa viene utilizzata online.

Quando provo a utilizzare il plug-in AJAXSLT per jQuery per elaborare un file XML con un modello XSL (nelle directory secondarie), ricevo i seguenti errori:

XMLHttpRequest cannot load file:///C:/path/to/XSL%20Website/data/home.xml. Origin null is not allowed by Access-Control-Allow-Origin.

XMLHttpRequest cannot load file:///C:/path/to/XSL%20Website/assets/xsl/main.xsl. Origin null is not allowed by Access-Control-Allow-Origin.

Il file indice che effettua la richiesta è file:///C:/path/to/XSL%20Website/index.htmlmentre i file JavaScript utilizzati sono memorizzati file:///C:/path/to/XSL%20Website/assets/js/.

Come posso fare per risolvere questo problema?

Per i casi in cui l'esecuzione di un server web locale non è un'opzione, puoi consentire a Chrome l'accesso ai file://file tramite uno switch del browser. Dopo alcuni scavi, ho trovato questa discussione , che menziona uno switch del browser nel post di apertura. Esegui la tua istanza di Chrome con:

chrome.exe --allow-file-access-from-files

Questo può essere accettabile per gli ambienti di sviluppo, ma poco altro. Certamente non lo vuoi sempre. Questo sembra ancora essere un problema aperto (da gennaio 2011).

Vedi anche: Problemi con jQuery getJSON utilizzando file locali in Chrome

In sostanza, l'unico modo per gestirlo è avere un server web in esecuzione su localhost e servirli da lì.

Non è sicuro per un browser consentire a una richiesta Ajax di accedere a qualsiasi file sul tuo computer, pertanto la maggior parte dei browser sembra trattare le richieste "file: //" come non aventi origine ai fini di " Stessa politica di origine "

L'avvio di un server web può essere banale quanto l' cding. Nella directory in cui sono in esecuzione i file:

python -m SimpleHTTPServer

Ecco uno script di Apple che avvierà Chrome con l'opzione --allow-file-access-from-files attivata, per gli sviluppatori OSX / Chrome là fuori:

set chromePath to POSIX path of "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"    
set switch to " --allow-file-access-from-files"
do shell script (quoted form of chromePath) & switch & " > /dev/null 2>&1 &"

Questa soluzione ti permetterà di caricare uno script locale usando jQuery.getScript (). Questa è un'impostazione globale ma è anche possibile impostare l'opzione crossDomain su una base per richiesta.

$.ajaxPrefilter( "json script", function( options ) {
  options.crossDomain = true;
});

Che dire dell'utilizzo della funzione FileReader javascript per aprire il file locale, ovvero:

<input type="file" name="filename" id="filename">
<script>
$("#filename").change(function (e) {
  if (e.target.files != undefined) {
    var reader = new FileReader();
    reader.onload = function (e) {
        // Get all the contents in the file
        var data = e.target.result; 
        // other stuffss................            
    };
    reader.readAsText(e.target.files.item(0));
  }
});
</script>

Ora fai clic sul Choose filepulsante e cerca il filefile:///C:/path/to/XSL%20Website/data/home.xml

Cromo lancio in questo modo per aggirare questa limitazione: open -a "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --args --allow-file-access-from-files.

Derivato dal commento di Josh Lee, ma dovevo specificare il percorso completo di Google Chrome in modo da evitare l'apertura di Google Chrome dalla mia partizione di Windows (in Parallels).

Il modo in cui ho appena risolto questo problema non è usare XMLHTTPRequest, ma includere invece i dati necessari in un file javascript separato. (Nel mio caso avevo bisogno di un BLOB binario di SQLite da utilizzare con https://github.com/kripken/sql.js/ )

Ho creato un file chiamato base64_data.js(e utilizzato btoa()per convertire i dati di cui avevo bisogno e inserirlo in un <div>modo che potessi copiarlo).

var base64_data = "U1FMaXRlIGZvcm1hdCAzAAQA ...<snip lots of data> AhEHwA==";

e quindi inclusi i dati nell'html come javascript normale:

<div id="test"></div>

<script src="base64_data.js"></script>
<script>
    data = atob(base64_data);
    var sqldb = new SQL.Database(data);
    // Database test code from the sql.js project
    var test = sqldb.exec("SELECT * FROM Genre");
    document.getElementById("test").textContent = JSON.stringify(test);
</script>

Immagino che sarebbe banale modificarlo per leggere JSON, forse anche XML; Lo lascerò come esercizio per il lettore;)

Si può provare a mettere 'Access-Control-Allow-Origin':'*'in response.writeHead(, {[here]}).

utilizza il "web server per l'app Chrome". (lo hai effettivamente sul tuo PC, se lo sai o no. basta cercarlo in cortana!). aprilo e fai clic su 'scegli file' scegli la cartella con il tuo file al suo interno. non selezionare effettivamente il file. seleziona la cartella dei tuoi file quindi fai clic sui link sotto il pulsante "scegli cartella".

se non ti porta al file, quindi aggiungi il nome del file agli urs. come questo:

   https://127.0.0.1:8887/fileName.txt

collegamento al server Web per Chrome: fare clic su di me