XMLHttpRequest Origin null tidak diizinkan Access-Control-Allow-Origin untuk file: /// ke file: /// (Serverless)

Saya mencoba membuat situs web yang dapat diunduh dan dijalankan secara lokal dengan meluncurkan file indeksnya.

Semua file bersifat lokal, tidak ada sumber daya yang digunakan online.

Ketika saya mencoba menggunakan plugin AJAXSLT untuk jQuery untuk memproses file XML dengan template XSL (dalam sub direktori), saya menerima kesalahan berikut:

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.

File indeks yang mengajukan permintaan adalah file:///C:/path/to/XSL%20Website/index.htmlsaat file JavaScript yang digunakan disimpan file:///C:/path/to/XSL%20Website/assets/js/.

Bagaimana saya bisa memperbaiki masalah ini?

Untuk keadaan saat menjalankan server web lokal bukan merupakan opsi, Anda dapat mengizinkan Chrome mengakses file://file melalui peramban. Setelah beberapa penggalian, saya menemukan diskusi ini , yang menyebutkan peramban beralih dalam membuka posting. Jalankan instance Chrome Anda dengan:

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

Ini mungkin dapat diterima untuk lingkungan pengembangan, tetapi sedikit yang lain. Anda tentu tidak menginginkan ini setiap saat. Ini tampaknya masih menjadi masalah terbuka (pada Januari 2011).

Lihat juga: Masalah dengan jQuery getJSON menggunakan file lokal di Chrome

Pada dasarnya satu-satunya cara untuk mengatasinya adalah dengan menjalankan server web di localhost dan melayani mereka dari sana.

Peramban tidak aman untuk mengizinkan permintaan ajax untuk mengakses file apa pun di komputer Anda, oleh karena itu sebagian besar browser tampaknya memperlakukan permintaan "file: //" karena tidak memiliki asal untuk tujuan " Kebijakan Asal yang Sama "

Memulai server web bisa sepele seperti cdmemasuki direktori tempat file sedang berjalan:

python -m SimpleHTTPServer

Berikut adalah applescript yang akan meluncurkan Chrome dengan sakelar --allow-file-access-from-file dinyalakan, untuk pengembang OSX / Chrome di luar sana:

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 &"

Solusi ini akan memungkinkan Anda memuat skrip lokal menggunakan jQuery.getScript (). Ini adalah pengaturan global tetapi Anda juga dapat mengatur opsi crossDomain berdasarkan permintaan.

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

Bagaimana dengan menggunakan fungsi FileReader javascript untuk membuka file lokal, yaitu:

<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>

Sekarang klik Choose filetombol dan browse ke filefile:///C:/path/to/XSL%20Website/data/home.xml

Peluncuran krom seperti begitu untuk memotong pembatasan ini: open -a "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --args --allow-file-access-from-files.

Berasal dari komentar Josh Lee, tetapi saya harus menentukan jalur lengkap ke Google Chrome untuk menghindari pembukaan Google Chrome dari partisi Windows saya (di Parallels).

Cara saya hanya mengatasinya adalah tidak menggunakan XMLHTTPRequest sama sekali, tetapi sertakan data yang diperlukan dalam file javascript terpisah sebagai gantinya. (Dalam kasus saya, saya membutuhkan gumpalan SQLite biner untuk digunakan dengan https://github.com/kripken/sql.js/ )

Saya membuat file bernama base64_data.js(dan digunakan btoa()untuk mengkonversi data yang saya butuhkan dan memasukkannya ke dalam <div>sehingga saya bisa menyalinnya).

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

dan kemudian memasukkan data dalam html seperti javascript normal:

<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>

Saya membayangkan akan sepele untuk memodifikasi ini untuk membaca JSON, bahkan mungkin XML; Saya akan meninggalkan itu sebagai latihan untuk pembaca;)

Anda dapat mencoba menempatkan 'Access-Control-Allow-Origin':'*'diresponse.writeHead(, {[here]}) .

gunakan 'server web untuk aplikasi chrome'. (Anda benar-benar memilikinya di pc Anda, apakah Anda tahu atau tidak. Cari saja di cortana!). buka dan klik 'pilih file' pilih folder dengan file Anda di dalamnya. jangan benar-benar memilih file Anda. pilih folder file Anda lalu klik tautan di bawah tombol 'pilih folder'.

jika tidak membawa Anda ke file, lalu tambahkan nama file ke urs. seperti ini:

   https://127.0.0.1:8887/fileName.txt

tautan ke server web untuk chrome: klik saya