XMLHttpRequest ไม่สามารถโหลดไฟล์ คำขอข้ามแหล่งที่มารองรับ HTTP เท่านั้น

ฉันได้รับข้อผิดพลาดต่อไปนี้:

XMLHttpRequest cannot load file:///C:/Users/richa.agiwal/Desktop/get/rm_Library/templates/template_viewSettings.html. Cross origin requests are only supported for HTTP. 

ฉันรู้ว่าคำถามนี้ได้รับคำตอบมาก่อน แต่ฉันยังไม่พบวิธีแก้ปัญหาของฉัน ฉันพยายามเรียกใช้chrome.exe --allow-file-access-from-filesจากพรอมต์คำสั่งและย้ายไฟล์ไปยังระบบไฟล์ภายในเครื่อง แต่ฉันยังคงได้รับข้อผิดพลาดเหมือนเดิม

ขอขอบคุณข้อเสนอแนะใด ๆ !

ถ้าคุณกำลังทำสิ่งที่ชอบเขียน HTML และ JavaScript Cross Origin Requestsในตัวแก้ไขรหัสบนคอมพิวเตอร์ส่วนบุคคลของคุณและการทดสอบการส่งออกในเบราว์เซอร์ของคุณคุณอาจจะได้รับข้อความแสดงข้อผิดพลาดเกี่ยวกับ เบราว์เซอร์ของคุณจะแสดง HTML และเรียกใช้ Javascript, jQuery, angularJs ในเบราว์เซอร์ของคุณโดยไม่จำเป็นต้องตั้งค่าเซิร์ฟเวอร์ แต่เว็บเบราว์เซอร์จำนวนมากได้รับการตั้งโปรแกรมให้เฝ้าระวังการโจมตีข้ามไซต์และจะบล็อกคำขอ คุณไม่ต้องการให้ใครก็ตามสามารถอ่านฮาร์ดไดรฟ์ของคุณจากเว็บเบราว์เซอร์ของคุณได้ คุณสามารถสร้างหน้าเว็บที่ทำงานได้อย่างสมบูรณ์โดยใช้ Notepad ++ ซึ่งจะเรียกใช้ Javascript และเฟรมเวิร์กเช่น jQuery และ angularJs และทดสอบทุกอย่างเพียงแค่ใช้รายการเมนู Notepad ++RUN, LAUNCH IN FIREFOX. นั่นเป็นวิธีที่ดีและง่ายในการเริ่มสร้างเว็บเพจ แต่เมื่อคุณเริ่มสร้างอะไรที่มากกว่าการจัดวาง css และการนำทางหน้าอย่างง่ายคุณต้องติดตั้งเซิร์ฟเวอร์ในเครื่องในเครื่องของคุณ

นี่คือตัวเลือกบางอย่างที่ฉันใช้

1. ทดสอบหน้าเว็บของคุณบน Firefox จากนั้นปรับใช้กับโฮสต์ของคุณ
2. หรือ: เรียกใช้เซิร์ฟเวอร์ภายใน

ทดสอบบน Firefox ปรับใช้กับโฮสต์

1. ปัจจุบัน Firefox อนุญาตคำขอ Cross Origin จากไฟล์ที่ให้บริการจากฮาร์ดไดรฟ์ของคุณ
2. เว็บไซต์โฮสติ้งของคุณจะอนุญาตการร้องขอไปยังไฟล์ในโฟลเดอร์ตามที่ไฟล์รายการกำหนด

เรียกใช้เซิร์ฟเวอร์ท้องถิ่น

• เรียกใช้เซิร์ฟเวอร์บนคอมพิวเตอร์ของคุณเช่น Apache หรือ Python
• Python ไม่ใช่เซิร์ฟเวอร์ แต่จะเรียกใช้เซิร์ฟเวอร์ธรรมดา

เรียกใช้เซิร์ฟเวอร์ท้องถิ่นด้วย Python

รับที่อยู่ IP ของคุณ:

• บน Windows: เปิด 'Command Prompt' โปรแกรมอุปกรณ์เสริมพร้อมรับคำสั่งทั้งหมด
• ฉันมักจะเรียกใช้Command Promptเป็นAdministrator. คลิกขวาที่Command Promptรายการเมนูแล้วมองหาRun As Administrator
• พิมพ์คำสั่ง: ipconfigแล้วกด Enter
• มองหา: ที่อยู่ IPv4 . . . . . . . 12.123.123.00
• มีเว็บไซต์ที่จะแสดงที่อยู่ IP ของคุณด้วย

หากคุณไม่มี Python ให้ดาวน์โหลดและติดตั้ง

การใช้ "Command Prompt" คุณต้องไปที่โฟลเดอร์ที่มีไฟล์ที่คุณต้องการใช้เป็นเว็บเพจ

• หากคุณต้องการกลับไปที่ไดเร็กทอรี C: \ Root - พิมพ์ cd /
• พิมพ์ cd Drive: \ Folder \ Folder \ etc เพื่อไปยังโฟลเดอร์ที่ไฟล์. html ของคุณคือ (หรือ php ฯลฯ )
• ตรวจสอบเส้นทาง ชนิด: เส้นทางที่พรอมต์คำสั่ง คุณต้องเห็นเส้นทางไปยังโฟลเดอร์ที่มี python อยู่ ตัวอย่างเช่นถ้า python อยู่ใน C: \ Python27 คุณจะต้องเห็นที่อยู่นั้นในเส้นทางที่ระบุไว้
• หากพา ธ ไปยังไดเร็กทอรี Python ไม่อยู่ในพา ธ คุณต้องตั้งค่าพา ธ พิมพ์: เส้นทางช่วยเหลือแล้วกด Enter คุณจะเห็นความช่วยเหลือสำหรับเส้นทาง
• พิมพ์สิ่งที่ต้องการ: path c: \ python27% path%
• % path% เก็บเส้นทางปัจจุบันทั้งหมดของคุณ คุณไม่ต้องการล้างเส้นทางปัจจุบันทั้งหมดของคุณเพียงแค่เพิ่มเส้นทางใหม่
• สร้างเส้นทางใหม่จากโฟลเดอร์ที่คุณต้องการให้บริการไฟล์
• เริ่มเซิร์ฟเวอร์ Python: Type: python -m SimpleHTTPServer portโดยที่ 'port' คือหมายเลขของพอร์ตที่คุณต้องการตัวอย่างเช่นpython -m SimpleHTTPServer 1337
• หากคุณปล่อยให้พอร์ตว่างไว้จะมีค่าเริ่มต้นเป็นพอร์ต 8000
• หากเซิร์ฟเวอร์ Python เริ่มทำงานสำเร็จคุณจะเห็นข้อความ

เรียกใช้แอปพลิเคชันเว็บของคุณในเครื่อง

• เปิดเบราว์เซอร์
• ในประเภทบรรทัดที่อยู่: http://your IP address:port
• http://xxx.xxx.x.x:1337 หรือhttp://xx.xxx.xxx.xx:8000สำหรับค่าเริ่มต้น
• หากเซิร์ฟเวอร์ทำงานคุณจะเห็นรายการไฟล์ของคุณในเบราว์เซอร์
• คลิกไฟล์ที่คุณต้องการให้บริการและควรแสดง

โซลูชันขั้นสูงเพิ่มเติม

• ติดตั้งโปรแกรมแก้ไขโค้ดเว็บเซิร์ฟเวอร์และบริการอื่น ๆ ที่รวมเข้าด้วยกัน

คุณสามารถติดตั้ง Apache, PHP, Python, SQL, Debuggers และอื่น ๆ ทั้งหมดแยกกันในเครื่องของคุณจากนั้นใช้เวลามากมายในการพยายามหาวิธีทำให้ทั้งหมดทำงานร่วมกันหรือมองหาโซลูชันที่รวมทุกสิ่งเหล่านั้นเข้าด้วยกัน

ฉันชอบใช้ XAMPP กับ NetBeans IDE คุณยังสามารถติดตั้ง WAMP ซึ่งมีUser Interfaceไว้สำหรับจัดการและรวม Apache และบริการอื่น ๆ

วิธีแก้ปัญหาง่ายๆ

หากคุณกำลังทำงานกับไฟล์ html / js / css บริสุทธิ์

ติดตั้งแอปเซิร์ฟเวอร์ ( ลิงค์ ) ขนาดเล็กนี้ใน chrome เปิดแอพและชี้ตำแหน่งไฟล์ไปยังไดเร็กทอรีโปรเจ็กต์ของคุณ

ไปที่ url ที่แสดงในแอป

แก้ไข: โซลูชันที่ชาญฉลาดขึ้นโดยใช้ Gulp

ขั้นตอนที่ 1:ในการติดตั้ง Gulp เรียกใช้คำสั่งต่อไปนี้ในเทอร์มินัลของคุณ

npm install gulp-cli -g
npm install gulp -D

ขั้นตอนที่ 2:ภายในไดเร็กทอรีโปรเจ็กต์ของคุณสร้างไฟล์ชื่อ gulpfile.js คัดลอกเนื้อหาต่อไปนี้ภายใน

var gulp        = require('gulp');
var bs          = require('browser-sync').create();   

gulp.task('serve', [], () => {
        bs.init({
            server: {
               baseDir: "./",
            },
            port: 5000,
            reloadOnRestart: true,
            browser: "google chrome"
        });
        gulp.watch('./**/*', ['', bs.reload]);
});

ขั้นตอนที่ 3:ติดตั้งปลั๊กอินซิงค์อึกของเบราว์เซอร์ ภายในไดเร็กทอรีเดียวกับที่มี gulpfile.js ให้รันคำสั่งต่อไปนี้

npm install browser-sync gulp --save-dev

ขั้นตอนที่ 4:เริ่มเซิร์ฟเวอร์ ภายในไดเร็กทอรีเดียวกับที่มี gulpfile.js ให้รันคำสั่งต่อไปนี้

gulp serve

ข้อผิดพลาดนี้เกิดขึ้นเนื่องจากคุณเพิ่งเปิดเอกสาร html โดยตรงจากเบราว์เซอร์ ในการแก้ไขปัญหานี้คุณจะต้องให้บริการรหัสของคุณจากเว็บเซิร์ฟเวอร์และเข้าถึงได้จาก localhost หากคุณมีการตั้งค่า Apache ให้ใช้เพื่อให้บริการไฟล์ของคุณ IDE บางตัวได้สร้างขึ้นในเว็บเซิร์ฟเวอร์เช่น JetBrains IDE's, Eclipse ...

หากคุณมีการติดตั้ง Node.js แล้วคุณสามารถใช้http เซิร์ฟเวอร์ เพียงแค่เรียกใช้npm install http-server -gและคุณจะสามารถใช้งานได้ในเทอร์มินัลเช่นhttp-server C:\location\to\app. Kirill Fuchs

หากต้องการเพิ่มคำตอบอย่างละเอียดของAlan Wellsนี่เป็นการแก้ไขอย่างรวดเร็ว

เรียกใช้เซิร์ฟเวอร์ท้องถิ่น

คุณสามารถให้บริการโฟลเดอร์ใดก็ได้ในคอมพิวเตอร์ของคุณด้วยServe

ขั้นแรกนำทางโดยใช้บรรทัดคำสั่งไปยังโฟลเดอร์ที่คุณต้องการให้บริการ

แล้วก็

npx i -g serve
serve

หรือหากคุณต้องการทดสอบให้บริการด้วยการดาวน์โหลด

npx serve

เท่านี้เอง! คุณสามารถดูไฟล์ของคุณได้ที่http: // localhost: 5000

ฉันพบข้อผิดพลาดนี้ในขณะที่ฉันปรับใช้โครงการ Web API ของฉันในเครื่องและฉันกำลังเรียกใช้โปรเจ็กต์ API ด้วย URL ที่ระบุด้านล่างเท่านั้น:

localhost // myAPIProject

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

http: // localhost // myAPIProject

หากคุณใช้WebStorm Javascript IDEคุณก็สามารถเปิดโปรเจ็กต์ของคุณจาก WebStorm ในเบราว์เซอร์ของคุณ WebStorm จะเริ่มต้นเซิร์ฟเวอร์โดยอัตโนมัติและคุณจะไม่ได้รับข้อผิดพลาดใด ๆ อีกต่อไปเนื่องจากคุณกำลังเข้าถึงไฟล์ด้วยโปรโตคอลที่อนุญาต / รองรับ (HTTP)

ขึ้นอยู่กับความต้องการของคุณ แต่ยังมีวิธีที่รวดเร็วในการตรวจสอบชั่วคราวของคุณ (จำลอง) โดยการบันทึก JSON JSON ของคุณบนhttp://myjson.com คัดลอกลิงค์ api แล้ววางลงในโค้ดจาวาสคริปต์ของคุณ Viola! เมื่อคุณต้องการปรับใช้รหัสคุณต้องไม่ลืมที่จะเปลี่ยน url ในรหัสของคุณ!

วางโฟลเดอร์โครงการของคุณใน htdocs ของไดเรกทอรี Xampp เริ่มเซิร์ฟเวอร์ Apache ของคุณโดยใช้แผงควบคุม xampp จากนั้นเปิดเบราว์เซอร์ไปที่ localhost / projectfolder จากนั้นจึงเริ่มทำงาน