คำขอข้ามแหล่งที่มารองรับเฉพาะ HTTP แต่ไม่ใช่ข้ามโดเมน

ฉันใช้รหัสนี้เพื่อส่งคำขอ AJAX:

$("#userBarSignup").click(function(){
    $.get("C:/xampp/htdocs/webname/resources/templates/signup.php",
        {/*params*/},
        function(response){
            $("#signup").html("TEST");
            $("#signup").html(response);
        },
        "html");

แต่จากคอนโซล Google Chrome JavaScript ฉันได้รับข้อผิดพลาดนี้อยู่เสมอ:

XMLHttpRequest ไม่สามารถโหลดไฟล์: /// C: /xampp/htdocs/webname/resources/templates/signup.php คำขอข้ามแหล่งที่มารองรับ HTTP เท่านั้น

ปัญหาคือไฟล์signup.phpโฮสต์อยู่บนเว็บเซิร์ฟเวอร์ภายในของฉันซึ่งเป็นที่ที่เรียกใช้เว็บไซต์ทั้งหมดดังนั้นจึงไม่ใช่ข้ามโดเมน

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

คุณต้องเรียกใช้เว็บเซิร์ฟเวอร์จริงและส่งคำขอไปยัง URI บนเซิร์ฟเวอร์นั้นแทนที่จะส่งคำขอไปยังไฟล์ เช่นเปลี่ยนบรรทัด:

    $.get("C:/xampp/htdocs/webname/resources/templates/signup.php",

อ่านสิ่งที่ชอบ:

    $.get("http://localhost/resources/templates/signup.php",

และหน้าคำขอเริ่มต้นจะต้องสร้างผ่าน http เช่นกัน

ฉันโชคดีที่เริ่ม Chrome ด้วยสวิตช์ต่อไปนี้:

--allow-file-access-from-files

ใน os x ให้ลอง (พิมพ์เครื่องหมายขีดกลางอีกครั้งหากคุณคัดลอกวาง):

open -a 'Google Chrome' --args -allow-file-access-from-files

ในการรัน * nix อื่น ๆ (ไม่ได้ทดสอบ)

 google-chrome  --allow-file-access-from-files

หรือบน windows แก้ไขคุณสมบัติของทางลัด chrome และเพิ่มสวิตช์เช่น

 C:\ ... \Application\chrome.exe --allow-file-access-from-files

ไปยังจุดสิ้นสุดของเส้นทาง "เป้าหมาย"

หากคุณกำลังทำงานในโครงการส่วนหน้าเล็กน้อยและต้องการทดสอบในเครื่องโดยทั่วไปคุณจะเปิดโดยชี้ไดเรกทอรีในเครื่องของคุณในเว็บเบราว์เซอร์เช่นป้อนไฟล์: /// home / erick / mysuperproject / index .html ในแถบ URL ของคุณ อย่างไรก็ตามหากไซต์ของคุณพยายามโหลดทรัพยากรแม้ว่าจะอยู่ในไดเร็กทอรีท้องถิ่นของคุณคุณอาจเห็นคำเตือนเช่นนี้:

XMLHttpRequest ไม่สามารถโหลดไฟล์: ///home/erick/mysuperproject/mylibrary.js คำขอข้ามแหล่งที่มารองรับ HTTP เท่านั้น

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

นี่ไม่ใช่จุดจบของโลกและมีโซลูชันมากมายรวมถึง Apache รุ่นเก่าที่ดี (พร้อม VirtualHosts หากคุณกำลังใช้งานโปรเจ็กต์อื่น ๆ ), node.js พร้อม Express, เซิร์ฟเวอร์ Ruby เป็นต้นหรือเพียงแค่ปรับเปลี่ยน การตั้งค่าเบราว์เซอร์

อย่างไรก็ตามมีวิธีแก้ปัญหาที่ง่ายและเบากว่าสำหรับคนขี้เกียจ คุณสามารถใช้ SimpleHTTPServer ของ Python มันมาพร้อมกับ python แล้วดังนั้นคุณไม่จำเป็นต้องติดตั้งหรือกำหนดค่าอะไรเลย!

ดังนั้น cd ไปยังไดเรกทอรีโครงการของคุณเช่น

1 cd / home / erick / mysuperproject จากนั้นใช้ไฟล์

1 python -m SimpleHTTPServer เพียงเท่านี้คุณก็จะเห็นข้อความนี้ในเทอร์มินัลของคุณ

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

เอาล่ะมีความสุขกับการเขียนโค้ด!

แก้ไข: ใน Python 3+ SimpleHTTPServer ถูกแทนที่ด้วย http.server ตัวอย่างเช่นใน Python 3.3 คำสั่งต่อไปนี้เทียบเท่า:

python -m http.server 8000

ฉันได้รับข้อผิดพลาดเดียวกันในขณะที่พยายามโหลดไฟล์ HTML ที่ใช้ข้อมูล JSON เพื่อเติมข้อมูลในหน้าดังนั้นฉันจึงใช้ node.js และ express เพื่อแก้ปัญหา หากคุณไม่ได้ติดตั้งโหนดคุณต้องติดตั้งโหนดก่อน

1. ติดตั้งด่วน npm install express

2. สร้างไฟล์ server.js ในโฟลเดอร์รูทของโปรเจ็กต์ของคุณในกรณีของฉันหนึ่งโฟลเดอร์เหนือไฟล์ที่ฉันต้องการไปยังเซิร์ฟเวอร์

3. ใส่สิ่งต่อไปนี้ในไฟล์ server.js และอ่านเกี่ยวกับสิ่งนี้ในไซต์ gihub ด่วน :

   var express = require('express');
   var app = express();
   var path = require('path');
   
   // __dirname will use the current path from where you run this file 
   app.use(express.static(__dirname));
   app.use(express.static(path.join(__dirname, '/FOLDERTOHTMLFILESTOSERVER')));
   
   app.listen(8000);
   console.log('Listening on port 8000');
   

4. หลังจากที่คุณบันทึก server.js แล้วคุณสามารถเรียกใช้เซิร์ฟเวอร์โดยใช้:

node server.js

5. ไปที่http://localhost:8000/FILENAMEแล้วคุณจะเห็นไฟล์ HTML ที่คุณพยายามโหลด

หากคุณติดตั้ง nodejs คุณสามารถดาวน์โหลดและติดตั้งเซิร์ฟเวอร์โดยใช้บรรทัดคำสั่ง:

npm install -g http-server

เปลี่ยนไดเร็กทอรีเป็นไดเร็กทอรีที่คุณต้องการให้บริการไฟล์จาก:

$ cd ~/projects/angular/current_project 

เรียกใช้เซิร์ฟเวอร์:

$ http-server 

ซึ่งจะสร้างข้อความเริ่มต้นเซิร์ฟเวอร์ http โดยให้บริการบน:

มีให้ที่: http: // your_ip: 8080และ http://127.0.0.1:8080

ที่ช่วยให้คุณใช้ url ในเบราว์เซอร์ของคุณเช่น

http: // your_ip: 8080 / index.html

วิธีนี้ได้ผลดีที่สุด ตรวจสอบให้แน่ใจว่าทั้งสองไฟล์อยู่บนเซิร์ฟเวอร์ เมื่อโทรหน้า html ที่ทำให้การใช้งานของที่อยู่เว็บที่ชอบ: และไม่http:://localhost/myhtmlfile.html C::///users/myhtmlfile.htmlทำให้เราเป็นเช่นกันว่า url ที่ส่งไปยัง json เป็นที่อยู่เว็บตามที่แสดงด้านล่าง:

$(function(){
                $('#typeahead').typeahead({
                    source: function(query, process){
                        $.ajax({
                            url: 'http://localhost:2222/bootstrap/source.php',
                            type: 'POST',
                            data: 'query=' +query,
                            dataType: 'JSON',
                            async: true,
                            success: function(data){
                                process(data);
                            }
                        });
                    }
                });
            });

REM kill all existing instance of chrome 
taskkill /F /IM chrome.exe /T
REM directory path where chrome.exe is located
set chromeLocation="C:\Program Files (x86)\Google\Chrome\Application"
cd %chromeLocation%
cd c:
start chrome.exe --allow-file-access-from-files

1. เปลี่ยนเส้นทาง chromeLocation กับคุณ

2. บันทึกด้านบนเป็นไฟล์. bat

3. ลากวางไฟล์ของคุณในไฟล์แบตช์ที่คุณสร้างขึ้น (chrome ให้ตัวเลือกกู้คืนหน้าแม้ว่าคุณจะเปิดหน้าเว็บเพียงแค่กดเรียกคืนและจะใช้งานได้)

คุณยังสามารถเริ่มต้นเซิร์ฟเวอร์โดยไม่ใช้ python โดยใช้ php interpreter

เช่น:

cd /your/path/to/website/root
php -S localhost:8000

สิ่งนี้จะมีประโยชน์หากคุณต้องการทางเลือกอื่นนอกเหนือจาก npm เนื่องจากยูทิลิตี้ php ติดตั้งไว้ล่วงหน้าในบางระบบปฏิบัติการ (รวมถึง Mac)

สำหรับผู้ใช้ python ทั้งหมด:

เพียงไปที่โฟลเดอร์ปลายทางของคุณในเทอร์มินัล

cd projectFoder

จากนั้นเริ่มเซิร์ฟเวอร์ HTTP สำหรับ Python3 +:

python -m http.server 8000

ให้บริการ HTTP บน :: port 8000 (http: // [::]: 8000 /) ...

ไปที่ลิงค์ของคุณ: http://0.0.0.0:8000/

สนุก :)