Origin null ไม่ได้รับอนุญาตจาก Access-Control-Allow-Origin

ฉันได้สร้างไฟล์ xslt ขนาดเล็กเพื่อสร้างเอาต์พุต html ชื่อ weather.xsl พร้อมรหัสดังนี้:

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

ฉันต้องการโหลดผลลัพธ์ html เป็น div ในไฟล์ html ที่ฉันพยายามทำโดยใช้ jQuery ดังนี้

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

แต่ฉันได้รับข้อผิดพลาดต่อไปนี้: Origin null ไม่ได้รับอนุญาตจาก Access-Control-Allow-Origin

ฉันได้อ่านเกี่ยวกับการเพิ่มส่วนหัวใน xslt แล้ว แต่ฉันไม่แน่ใจว่าจะทำเช่นไรดังนั้นความช่วยเหลือใด ๆ ก็จะได้รับการชื่นชมและหากการโหลดใน html ouput ไม่สามารถทำได้ด้วยวิธีนี้แล้วให้คำแนะนำเกี่ยวกับวิธีอื่น ที่จะทำมันจะดี

Origin nullเป็นระบบไฟล์ในเครื่องดังนั้นแนะนำให้คุณโหลดหน้า HTML ที่ทำการloadโทรผ่านfile:///URL (เช่นเพียงดับเบิลคลิกที่เบราว์เซอร์ในไฟล์หรือคล้ายกัน) เบราว์เซอร์ที่แตกต่างกันใช้วิธีการที่แตกต่างกันในการนำนโยบายแหล่งกำเนิดเดียวกันไปใช้กับไฟล์ในเครื่อง

ฉันเดาว่าคุณเห็นสิ่งนี้โดยใช้ Chrome กฎของ Chrome สำหรับการใช้ SOP กับไฟล์ในตัวเครื่องนั้นแน่นมากไม่สามารถทำได้แม้กระทั่งการโหลดไฟล์จากไดเรกทอรีเดียวกับเอกสาร Opera ก็เช่นกัน เบราว์เซอร์อื่น ๆ เช่น Firefox อนุญาตการเข้าถึงไฟล์ในตัวเครื่องอย่าง จำกัด แต่โดยพื้นฐานแล้วการใช้ Ajax กับทรัพยากรในท้องถิ่นจะไม่ทำงานข้ามเบราว์เซอร์

หากคุณกำลังทดสอบสิ่งที่อยู่ในเครื่องซึ่งคุณจะนำไปใช้กับเว็บแทนที่จะใช้ไฟล์ในเครื่องให้ติดตั้งเว็บเซิร์ฟเวอร์แบบง่าย ๆ และทดสอบผ่านhttp://URL แทน ที่ให้ภาพความปลอดภัยที่แม่นยำยิ่งขึ้น

Chrome และ Safari มีข้อ จำกัด ในการใช้ Ajax กับทรัพยากรในท้องถิ่น นั่นเป็นสาเหตุที่ทำให้เกิดข้อผิดพลาดเช่น

Origin null ไม่ได้รับอนุญาตจาก Access-Control-Allow-Origin

วิธีแก้ไข:ใช้ Firefox หรืออัปโหลดข้อมูลของคุณไปยังเซิร์ฟเวอร์ชั่วคราว หากคุณยังต้องการใช้ Chrome ให้เริ่มด้วยตัวเลือกด้านล่าง

--allow-file-access-from-files

ข้อมูลเพิ่มเติมวิธีเพิ่มพารามิเตอร์ด้านบนให้กับ Chrome ของคุณ:คลิกขวาที่ไอคอน Chrome บนทาสก์บาร์ของคุณคลิกขวาที่ Google Chrome บนหน้าต่างป๊อปอัพและคลิกคุณสมบัติและเพิ่มพารามิเตอร์ด้านบนในช่องข้อความเป้าหมายภายใต้แท็บทางลัด มันจะเป็นดังนี้;

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

หวังว่านี่จะช่วยได้!

เพียงแค่ต้องการเพิ่มว่าคำตอบ "เรียกใช้เว็บเซิร์ฟเวอร์" ค่อนข้างน่ากลัว แต่ถ้าคุณมีงูหลามในระบบของคุณ (ติดตั้งโดยค่าเริ่มต้นอย่างน้อยใน MacOS และการกระจาย Linux ใด ๆ ) มันง่ายเหมือน:

python -m http.server  # with python3

หรือ

python -m SimpleHTTPServer  # with python2

ดังนั้นหากคุณมีไฟล์ html myfile.htmlในโฟลเดอร์ให้พูดmydirสิ่งที่คุณต้องทำคือ:

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

จากนั้นชี้เบราว์เซอร์ของคุณไปที่:

http://localhost:8000/myfile.html

และคุณทำเสร็จแล้ว! ทำงานบนเบราว์เซอร์ทั้งหมดโดยไม่ต้องปิดใช้งานความปลอดภัยของเว็บอนุญาตให้ใช้ไฟล์ในตัวเครื่องหรือแม้แต่รีสตาร์ทเบราว์เซอร์ด้วยตัวเลือกบรรทัดคำสั่ง

ฉันอยากจะเพิ่มอย่างถ่อมใจตามแหล่งที่มา SO นี้: https://stackoverflow.com/a/14671362/1743693ปัญหาประเภทนี้ได้รับการแก้ไขเพียงบางส่วนโดยใช้คำสั่ง jQuery ต่อไปนี้:

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

ฉันลองใช้ IE10.0.9200 และใช้งานได้ทันที (โดยใช้ jquery-1.9.0.js)

บน chrome 28.0.1500.95 - คำสั่งนี้ใช้งานไม่ได้ (เกิดขึ้นทุกครั้งที่Davidบ่นในความคิดเห็นที่ลิงค์ด้านบน)

การเรียกใช้งาน Chrome ด้วย --allow-file-access-from-files ไม่ได้ผลสำหรับฉัน (ตามที่ Maistora อ้างสิทธิ์ข้างต้น)

การเพิ่มบิตเพื่อใช้โซลูชันของ Gokhan สำหรับการใช้งาน:

--allow-file-access-from-files

ตอนนี้คุณเพียง แต่ต้องผนวกข้อความด้านบนในข้อความเป้าหมายตามด้วยช่องว่าง ตรวจสอบให้แน่ใจว่าคุณปิดอินสแตนซ์ทั้งหมดของเบราว์เซอร์ chrome หลังจากเพิ่มคุณสมบัติด้านบน ตอนนี้ให้รีสตาร์ท Chrome ด้วยไอคอนที่คุณเพิ่มคุณสมบัตินี้ มันควรจะใช้ได้สำหรับทุกคน

ฉันกำลังมองหาวิธีแก้ปัญหาเพื่อทำการร้องขอ XHR ไปยังเซิร์ฟเวอร์จากไฟล์ html ท้องถิ่นและพบวิธีแก้ปัญหาโดยใช้ Chrome และ PHP (ไม่มี 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();

ส่วนหัวคำขอของ Chrome ของฉัน Origin: null

ส่วนหัวการตอบสนอง PHP ของฉัน (โปรดทราบว่า 'null' เป็นสตริง ) HTTP_REFERER อนุญาตให้มีการข้ามทางจากเซิร์ฟเวอร์ระยะไกลไปยังอีกเครื่องหนึ่ง

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

ฉันสามารถเชื่อมต่อกับเซิร์ฟเวอร์ของฉันได้สำเร็จ คุณสามารถมองข้ามส่วนหัวของหนังสือรับรองได้ แต่สิ่งนี้ใช้ได้กับฉันเมื่อAuthType Basicเปิดใช้งานApache

ฉันทดสอบความเข้ากันได้กับ FF และ Opera มันทำงานได้ในหลายกรณีเช่น:

จาก VM LAN IP (192.168.0.x) กลับสู่ VM'S WAN (สาธารณะ) IP: พอร์ต
จาก VM LAN IP กลับไปเป็นชื่อโดเมนเซิร์ฟเวอร์ระยะไกล
จากไฟล์. HTML แบบโลคัลจนถึง VM LAN IP และ / หรือ VM WAN IP: พอร์ต,
จากไฟล์. HTML แบบโลคัลเป็นชื่อโดเมนเซิร์ฟเวอร์ระยะไกล
และอื่น ๆ

คุณสามารถโหลดไฟล์ Javascript ในท้องถิ่น (ในต้นไม้ด้านล่างfile:/หน้าแหล่งที่มาของคุณ) โดยใช้แท็กแหล่งที่มา:

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

หากคุณเข้ารหัสอินพุตของคุณเป็น Javascript เช่นในกรณีนี้:

mydata.js :

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

(วิธีนี้ง่ายกว่าสำหรับ json) จากนั้นคุณมี 'ข้อมูล' ของคุณในตัวแปรทั่วโลกของ Javascript ที่จะใช้ตามที่คุณต้องการ