Access-Control-Allow-Origin tarafından orijin null değerine izin verilmiyor

Weather.xsl adlı kod ile aşağıdaki gibi bir html çıkışı oluşturmak için küçük bir xslt dosyası yaptım:

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

Aşağıdaki gibi jQuery kullanarak yapmaya çalışıyorum bir html dosyasında bir div içine html çıktı yüklemek istiyorum:

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

Ancak aşağıdaki hatayı alıyorum: Orijin null, Access-Control-Allow-Origin tarafından izin verilmiyor.

Ben xslt için bir başlık ekleme hakkında okudum, ama bunu nasıl yapacağımı bilmiyorum, bu yüzden herhangi bir yardım mutluluk duyacağız ve html çıkışına yükleme bu şekilde yapılamazsa, başka nasıl tavsiye bunu yapmak harika olurdu.

Menşei nullyerel dosya sistemidir, bu nedenle loadçağrıyı bir file:///URL yoluyla yükleyen HTML sayfasını yüklemenizi önerir (ör. Yerel bir dosya tarayıcısında veya benzeri bir dosyada çift tıklamak). Farklı tarayıcılar , Yerel Dosyalara Aynı Kaynak İlkesini uygulamak için farklı yaklaşımlar kullanır .

Tahminimce bunu Chrome kullanarak görüyorsunuz. Chrome'un SOP'u yerel dosyalara uygulama kuralları çok sıkıdır, belge ile aynı dizinden dosya yüklenmesine bile izin vermemektedir. Opera da öyle. Firefox gibi diğer bazı tarayıcılar yerel dosyalara sınırlı erişime izin verir. Ancak temel olarak, ajax'ı yerel kaynaklarla kullanmak çapraz tarayıcıda işe yaramaz.

Yalnızca yerel dosyaları kullanmak yerine web'e gerçekten dağıtacağınız bir şeyi yerel olarak test ediyorsanız, basit bir web sunucusu yükleyin ve http://bunun yerine URL'ler aracılığıyla test edin . Bu size çok daha doğru bir güvenlik resmi sağlar.

Chrome ve Safari'nin ajax'ı yerel kaynaklarla kullanma konusunda bir kısıtlaması vardır. Bu yüzden böyle bir hata atıyor

Access-Control-Allow-Origin tarafından orijin null değerine izin verilmiyor.

Çözüm: Firefox kullanın veya verilerinizi geçici bir sunucuya yükleyin. Hala Chrome'u kullanmak istiyorsanız, aşağıdaki seçenekle başlatın;

--allow-file-access-from-files

Yukarıdaki parametreyi Chrome'unuza nasıl ekleyeceğiniz hakkında daha fazla bilgi: Görev çubuğunuzdaki Chrome simgesini sağ tıklayın, açılır pencerede Google Chrome'u sağ tıklayın ve özellikleri tıklayın ve yukarıdaki parametreyi Kısayol sekmesi altındaki Hedef metin kutusuna ekleyin. Aşağıdaki gibi olacak;

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

Umarım bu yardımcı olur!

Sadece "bir web sunucusu çalıştır" cevabının oldukça göz korkutucu göründüğünü eklemek istedim, ancak sisteminizde python varsa (varsayılan olarak en azından MacOS ve herhangi bir Linux dağıtımında yüklüdür):

python -m http.server  # with python3

veya

python -m SimpleHTTPServer  # with python2

Yani, html dosyanızı myfile.htmlbir klasörde mydirvarsa, tek yapmanız gereken:

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

Ardından tarayıcınızı şu adrese yönlendirin:

http://localhost:8000/myfile.html

Ve işiniz bitti! Çalışır tüm tarayıcılar , web güvenliği devre dışı bırakılması izin yerel dosyaları, hatta komut satırı seçenekleri ile tarayıcıyı yeniden başlatmadan.

Bunu bu SO kaynağına göre alçakgönüllü bir şekilde eklemek istiyorum: https://stackoverflow.com/a/14671362/1743693 , bu tür bir sorun şimdi sadece aşağıdaki jQuery talimatını kullanarak kısmen çözüldü:

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

IE10.0.9200 üzerinde denedim ve hemen çalıştı (jquery-1.9.0.js kullanarak).

Chrome 28.0.1500.95'te - bu talimat işe yaramıyor (bu, David'in yukarıdaki bağlantıdaki yorumlarda şikayet ettiği gibi her şey oluyor )

Chrome'u --allow-file-access-from-files ile çalıştırmak benim için işe yaramadı (Maistora'nın yukarıdaki iddiaları gibi)

Gökhan'ın çözümünü kullanmak için biraz ekleyerek:

--allow-file-access-from-files

Şimdi Hedef metne metnin yukarısına bir boşluk eklemeniz yeterlidir. above özelliğini ekledikten sonra tüm krom tarayıcı örneklerini kapattığınızdan emin olun. Şimdi bu özelliği eklediğiniz simgeyle chrome'u yeniden başlatın. Herkes için çalışmalı.

Yerel bir html dosyasından bir sunucuya XHR isteği yapmak için bir çözüm arıyordum ve Chrome ve PHP kullanarak bir çözüm buldum. (Jquery yok)

Javascriptlerinizi:

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

Chrome'umun istek başlığı Origin: null

PHP yanıt başlığım ('null' ifadesinin bir dize olduğunu unutmayın ). HTTP_REFERER uzak bir sunucudan diğerine çapraz kaynağa izin verir.

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

Sunucuma başarıyla bağlanabildim. Kimlik Bilgileri başlıklarını göz ardı edebilirsiniz, ancak bu benim için Apache AuthType Basicetkinken çalışır

FF ve Opera ile uyumluluğu test ettim, gibi birçok durumda çalışır:

VM LAN IP'sinden (192.168.0.x) VM'S WAN (genel) IP'sine: bağlantı noktası
VM LAN IP'sinden uzak sunucu etki alanı adına.
Yerel bir .HTML dosyasından VM LAN IP'sine ve / veya VM WAN IP: bağlantı noktasına,
Yerel bir .HTML dosyasından uzak sunucu etki alanı adına.
Ve bunun gibi.

file:/Kaynak etiketi kullanarak yerel bir Javascript dosyasını ( kaynak sayfanızın altındaki ağaçta ) yükleyebilirsiniz:

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

Girişinizi Javascript olarak kodlarsanız, bu durumda olduğu gibi:

mydata.js :

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

(bu json için daha kolay) o zaman istediğiniz gibi kullanmak için bir Javascript genel değişkeninde 'veri' var.