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

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.

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.

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!

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.

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)

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.

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.

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.