Asal nol tidak diizinkan oleh Access-Control-Allow-Origin

184

Saya telah membuat file xslt kecil untuk membuat output html yang disebut weather.xsl dengan kode sebagai berikut:

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

Saya ingin memuat dalam output html ke div di file html yang saya coba lakukan menggunakan jQuery sebagai berikut:

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

Tapi saya mendapatkan kesalahan berikut: Origin null tidak diizinkan oleh Access-Control-Allow-Origin.

Saya sudah membaca tentang menambahkan header ke xslt, tapi saya tidak yakin bagaimana melakukannya, jadi bantuan apa pun akan dihargai, dan jika memuat di html ouput tidak dapat dilakukan dengan cara ini, maka saran tentang bagaimana lagi melakukan itu akan bagus.

dudledok
sumber
Apakah itu panggilan Anda yang sebenarnya load ? Tidak ada jalan sama sekali?
TJ Crowder

Jawaban:

227

Origin nulladalah sistem file lokal, sehingga menunjukkan bahwa Anda memuat halaman HTML yang melakukan loadpanggilan melalui file:///URL (mis., Cukup klik dua kali di browser file lokal atau serupa). Browser yang berbeda mengambil pendekatan yang berbeda untuk menerapkan Kebijakan Asal yang Sama ke file lokal.

Dugaan saya adalah Anda melihat ini menggunakan Chrome. Aturan Chrome untuk menerapkan SOP ke file lokal sangat ketat, bahkan melarang memuat file dari direktori yang sama dengan dokumen. Begitu juga Opera. Beberapa browser lain, seperti Firefox, memungkinkan akses terbatas ke file lokal. Tetapi pada dasarnya, menggunakan ajax dengan sumber daya lokal tidak akan bekerja lintas-browser.

Jika Anda hanya menguji sesuatu secara lokal yang benar-benar akan Anda sebarkan ke web, daripada menggunakan file lokal, instal server web sederhana dan uji melalui http://URL. Itu memberi Anda gambaran keamanan yang jauh lebih akurat.

TJ Crowder
sumber
1
Setelah saya mengunggahnya, saya tidak lagi mendapatkan Origin null, tetapi saya masih "tidak diizinkan oleh Access-Control-Allow-Origin."
dudledok
3
Jika sumber daya yang Anda muat seperti yang Anda tunjukkan ( $('#result').load('weather.xsl');), itu seharusnya tidak terjadi, karena permintaan jelas ke asal yang sama. Jika Anda mencoba memuat dari tempat lain (misalnya, $('#result').load('http://somewhere.else/weather.xsl');), maka Anda menjalankan SOP lagi, tetapi dengan cara yang berbeda. Ajax permintaan dibatasi untuk sama asal (lihat link di jawaban), atau jika Anda menggunakan CORS peramban berkemampuan dan dukungan server yang CORS, server dapat memilih apakah akan mengizinkan permintaan cross-asal.
TJ Crowder
Saya mengubah url muat. Mengubahnya kembali ke yang ada di pertanyaan membuatnya memuat baik-baik saja. Terima kasih atas bantuannya
dudledok
2
Apa cara termudah dan tercepat untuk membuat server web sederhana? Apakah IIS akan menjadi cara paling sederhana di sini?
Ciaran Gallagher
13
@CiaranG Saya berlari python -m SimpleHTTPServerdari baris perintah dan kemudian pergi ke localhost: 8000, bekerja untuk saya. Python sudah diinstal sebelumnya dengan Mac OS X; Anda mungkin perlu menginstal jika menggunakan OS lain.
Dave Liepmann
216

Chrome dan Safari memiliki batasan untuk menggunakan ajax dengan sumber daya lokal. Itu sebabnya itu seperti melempar kesalahan

Asal nol tidak diizinkan oleh Access-Control-Allow-Origin.

Solusi: Gunakan firefox atau unggah data Anda ke server sementara. Jika Anda masih ingin menggunakan Chrome, mulailah dengan opsi di bawah ini;

--allow-file-access-from-files

Info selengkapnya cara menambahkan parameter di atas ke Chrome Anda: Klik kanan ikon Chrome di bilah tugas Anda, klik kanan Google Chrome di jendela sembulan dan klik properti dan tambahkan parameter di atas di dalam kotak teks Target di bawah tab Shortcut. Ini akan seperti di bawah ini;

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

Semoga ini bisa membantu!

Gokhan Tank
sumber
19
Di Mac OS X, Anda dapat memulai Chrome dengan opsi ini dengan membuka terminal, dan mengetik: /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files & Catat final & hanya agar Anda dapat terus menggunakan Terminal dan tidak diperlukan. CATATAN: Jika Anda menutup terminal, itu akan menutup jendela Chrome.
Bruno Bernardino
3
Melakukan semua itu dan menutup dan membuka. masih tidak ada (Chrome 27.0.1453.116 m di XP)
mplungjan
Saya tidak dapat menambahkan parameter ini di Windows 8 ..., siapa yang tahu bagaimana melakukannya? ...
Morty
Aku sedang berjalan dari web server. Apa apaan? Bagaimana saya mengetahui di mana itu memuat file lokal?
Andy
Ketika saya mencoba menambahkan --allow-file-access-from-file ke jalur target saya mendapat pesan ".... tidak valid", apakah solusi ini masih valid?
alex
48

Hanya ingin menambahkan bahwa jawaban "jalankan server" tampaknya cukup menakutkan, tetapi jika Anda memiliki python pada sistem Anda (diinstal secara default setidaknya pada MacOS dan distribusi Linux apa pun) semudah:

python -m http.server  # with python3

atau

python -m SimpleHTTPServer  # with python2

Jadi, jika Anda memiliki file html myfile.htmldi folder, katakan mydir, yang harus Anda lakukan adalah:

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

Lalu arahkan browser Anda ke:

http://localhost:8000/myfile.html

Dan Anda selesai! Bekerja pada semua browser , tanpa menonaktifkan keamanan web, memungkinkan file lokal, atau bahkan me-restart browser dengan opsi baris perintah.

gozzilli
sumber
2
setara python 3 di windows adalah: python -m http.server [<portNo>]
Aragorn
Python 3: python3 -m http.server
João Nunes
Python 2 di Linux, memilih port 8080 (atau lainnya yang Anda inginkan):python -m SimpleHTTPServer 8080
Rodrigo
2

Dengan rendah hati saya ingin menambahkan bahwa menurut sumber SO ini: https://stackoverflow.com/a/14671362/1743693 , masalah semacam ini sekarang sebagian diselesaikan hanya dengan menggunakan instruksi jQuery berikut:

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

Saya mencobanya di IE10.0.9200, dan langsung berfungsi (menggunakan jquery-1.9.0.js).

Pada chrome 28.0.1500.95 - instruksi ini tidak berfungsi (ini terjadi di mana david mengeluh dalam komentar di tautan di atas)

Menjalankan chrome dengan --allow-file-access-from-file tidak berfungsi untuk saya (seperti klaim Maistora di atas)

orberkov
sumber
2

Menambahkan sedikit untuk menggunakan solusi Gokhan untuk menggunakan:

--allow-file-access-from-files

Sekarang Anda hanya perlu menambahkan teks di atas dalam teks Target diikuti dengan spasi. pastikan Anda menutup semua instance browser chrome setelah menambahkan properti di atas. Sekarang mulai ulang chrome dengan ikon tempat Anda menambahkan properti ini. Itu harus bekerja untuk semua.

saurabh
sumber
Parameter sudah dipresentasikan oleh Ghokan Tank dan mencari tahu cara selalu memulai Browser dengan parameter ini bukan bagian dari pertanyaan. Selain itu, Anda tidak dapat menganggap semua orang menggunakan Microsoft Windows.
jnns
0

Saya sedang mencari solusi untuk membuat permintaan XHR ke server dari file html lokal dan menemukan solusi menggunakan Chrome dan PHP. (tanpa Jquery)

Javascripts:

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

Header permintaan Chrome saya Origin: null

Header respons PHP saya (Perhatikan bahwa 'null' adalah sebuah string ). HTTP_REFERER memungkinkan lintas asal dari server jarak jauh ke yang lain.

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

Saya berhasil terhubung ke server saya. Anda dapat mengabaikan header Kredensial, tetapi ini berfungsi untuk saya jika Apache AuthType Basicdiaktifkan

Saya menguji kompatibilitas dengan FF dan Opera, Ini berfungsi dalam banyak kasus seperti:

Dari IP VM LAN (192.168.0.x) kembali ke IP WAN (publik)
VM : port Dari IP LAN VM, kembali ke nama domain server jarak jauh.
Dari file .HTML lokal ke port IP LAN VM dan / atau VM WAN IP:
Dari file .HTML lokal ke nama domain server jarak jauh.
Dan seterusnya.

Louis Loudog Trottier
sumber
0

Anda dapat memuat file Javascript lokal (di pohon di bawah file:/halaman sumber Anda ) menggunakan tag sumber:

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

Jika Anda menyandikan input ke Javascript, seperti dalam kasus ini:

mydata.js :

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

(ini lebih mudah untuk json) maka Anda memiliki 'data' dalam variabel global Javascript untuk digunakan sesuai keinginan.

Kaya
sumber