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


209

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?

Jawaban:


177

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


1
@ Rich, senang itu membantu! Saya ingin tahu apakah akan ada permintaan yang lebih besar untuk ini dengan dorongan Google terhadap aplikasi berbasis browser. Saya pikir permintaan hanya akan tumbuh.
Courtney Christensen

4
ini sangat membantu untuk mac OS X cweagans.net/blog/2011/1/24/…
kinet

1
Terima kasih, saya bertanya-tanya di mana saya salah kode, sepertinya browser adalah masalahnya.
Arda

4
Apakah ada alasan --allow-file-access-from-file tidak akan memperbaiki masalah ini. Saya hanya mencoba memuat file skrip seperti $ .getScript ("application.js"); dan dapatkan kesalahan yang dijelaskan dalam pertanyaan.
Denzo

1
Ini berfungsi, namun "Sebelum Anda menjalankan perintah, pastikan semua jendela Chrome Anda tertutup dan tidak berjalan. Atau, param baris perintah tidak akan efektif." Chrome.exe --allow-file-access-from- files "" ( stackoverflow.com/a/4208455/1272428 )
rluks

87

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

1
Saya berharap dapat mengembangkan solusi yang tidak mengharuskan pengguna untuk menggunakan apa pun lebih dari browser web mereka. Menggunakan Python, penerjemah apa pun, atau perangkat lunak agnostik selain sistem tidak dapat dijalankan.
Kevin Herrera

5
Yah satu-satunya solusi yang dapat saya pikirkan adalah memuat semuanya dalam satu halaman sehingga Anda tidak perlu membuat permintaan ajax ke sistem file.
Singletoned

2
@Singletoned, terima kasih! Saya menggunakan solusi Anda dan ini sangat berguna!
Hendy Irawan

4
Dan jika Anda menggunakan Python 3, perintahnya adalah python -m http.server.
alextercete

4

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

14
Anda hanya dapat menggunakan open (1) untuk menambahkan bendera: open -a 'Google Chrome' --args --allow-file-access-from-files.
Josh Lee

4

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

bekerja seperti pesona untuk memuat file js lokal dari file html lokal! terima kasih, persis apa yang saya butuhkan.
user1577390

4

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


3

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


2

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


1

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


6
dari mana respons. Menulis. Dari mana datangnya, bagaimana saya menyebutnya dan dari mana? Bisakah Anda memberi lebih banyak contoh? Perlu diingat ini adalah sistem file lokal bukan server. Pemahaman saya adalah bahwa nilai hanya dapat diatur dari server?
Joseph Astrahan

0

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

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.