ไม่อนุญาตให้ใช้ XMLHttpRequest Origin Null สำหรับ Access-Control-Allow-Origin สำหรับไฟล์: /// ไปที่ file: /// (Serverless)

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

ไฟล์ทั้งหมดเป็นไฟล์ในเครื่องไม่มีทรัพยากรที่ใช้งานออนไลน์

เมื่อฉันพยายามใช้ปลั๊กอิน AJAXSLT สำหรับ jQuery เพื่อประมวลผลไฟล์ XML ด้วยเทมเพลต XSL (ในไดเรกทอรีย่อย) ฉันได้รับข้อผิดพลาดดังต่อไปนี้:

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:///C:/path/to/XSL%20Website/index.htmlในขณะที่ไฟล์ JavaScript file:///C:/path/to/XSL%20Website/assets/js/ที่ใช้จะถูกเก็บไว้ใน

ฉันจะแก้ไขปัญหานี้ได้อย่างไร

สำหรับอินสแตนซ์ที่ใช้งานเว็บเซิร์ฟเวอร์ในพื้นที่ไม่ใช่ตัวเลือกคุณสามารถอนุญาตให้ Chrome เข้าถึงfile://ไฟล์ผ่านสวิตช์ของเบราว์เซอร์ หลังจากการขุดฉันพบการสนทนานี้ซึ่งกล่าวถึงสวิตช์ของเบราว์เซอร์ในการเปิดโพสต์ เรียกใช้อินสแตนซ์ Chrome ของคุณด้วย:

chrome.exe --allow-file-access-from-files

สิ่งนี้อาจยอมรับได้สำหรับสภาพแวดล้อมการพัฒนา แต่อย่างอื่น แน่นอนว่าคุณไม่ต้องการสิ่งนี้ตลอดเวลา ปัญหานี้ยังคงเป็นปัญหาเปิดอยู่ (ณ เดือนมกราคม 2554)

ดูเพิ่มเติม: ปัญหาเกี่ยวกับ jQuery getJSON โดยใช้ไฟล์ในเครื่องใน Chrome

เป็นหลักวิธีเดียวที่จะจัดการกับเรื่องนี้คือการมีเว็บเซิร์ฟเวอร์ทำงานบน localhost และให้บริการจากที่นั่น

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

การเริ่มต้นเว็บเซิร์ฟเวอร์อาจไม่สำคัญเท่ากับการcdเข้าสู่ไดเรกทอรีไฟล์ที่อยู่และทำงานอยู่:

python -m SimpleHTTPServer

นี่คือแอปพลิเคชันที่จะเปิดใช้งาน Chrome โดยเปิดสวิตช์ --allow-access-access-from-files ไว้สำหรับ OSX / Chrome เป็นเครื่องมือออก:

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

โซลูชันนี้จะช่วยให้คุณสามารถโหลดสคริปต์ท้องถิ่นโดยใช้ jQuery.getScript () นี่เป็นการตั้งค่าส่วนกลาง แต่คุณยังสามารถตั้งค่าตัวเลือก crossDomain ได้ตามคำขอต่อ

$.ajaxPrefilter( "json script", function( options ) {
  options.crossDomain = true;
});

สิ่งที่เกี่ยวกับการใช้ฟังก์ชั่นjavascript FileReaderเพื่อเปิดไฟล์ภายในเครื่องเช่น:

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

ตอนนี้คลิกChoose fileปุ่มและเรียกดูไฟล์file:///C:/path/to/XSL%20Website/data/home.xml

เปิดตัว Chrome เพื่อหลีกเลี่ยงข้อ จำกัด นี้: open -a "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --args --allow-file-access-from-files.

มาจากความคิดเห็นของ Josh Leeแต่ฉันต้องระบุเส้นทางแบบเต็มไปยัง Google Chrome เพื่อหลีกเลี่ยงการเปิด Google Chrome จากพาร์ติชัน Windows ของฉัน (ใน Parallels)

วิธีที่ฉันเพิ่งแก้ไขสิ่งนี้ไม่ได้ใช้ XMLHTTPRequest เลย แต่รวมถึงข้อมูลที่จำเป็นในไฟล์ javascript แยกต่างหากแทน (ในกรณีของฉันฉันต้องการไบนารี SQLite blob เพื่อใช้กับhttps://github.com/kripken/sql.js/ )

ฉันสร้างไฟล์ชื่อbase64_data.js(และใช้btoa()ในการแปลงข้อมูลที่ฉันต้องการและแทรกลงใน<div>ดังนั้นฉันสามารถคัดลอกได้)

var base64_data = "U1FMaXRlIGZvcm1hdCAzAAQA ...<snip lots of data> AhEHwA==";

แล้วรวมข้อมูลใน html เช่น javascript ปกติ:

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

ฉันคิดว่ามันจะไม่สำคัญที่จะแก้ไขสิ่งนี้เพื่ออ่าน JSON หรือแม้แต่ XML ฉันจะปล่อยให้มันเป็นแบบฝึกหัดสำหรับผู้อ่าน;)

คุณสามารถลองวางใน'Access-Control-Allow-Origin':'*'response.writeHead(, {[here]})

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

หากไม่นำคุณไปยังไฟล์ให้เพิ่มชื่อของไฟล์ลงใน urs แบบนี้:

   https://127.0.0.1:8887/fileName.txt

ลิงก์ไปยังเว็บเซิร์ฟเวอร์สำหรับ chrome: คลิกฉัน