Permintaan lintas sumber hanya didukung untuk HTTP tetapi tidak lintas domain

Saya menggunakan kode ini untuk membuat permintaan AJAX:

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

Tetapi dari konsol JavaScript Google Chrome saya terus menerima kesalahan ini:

XMLHttpRequest tidak dapat memuat file: /// C: /xampp/htdocs/webname/resources/templates/signup.php. Permintaan lintas sumber hanya didukung untuk HTTP.

Masalahnya adalah file signup.php di -host di server web lokal saya dari situlah semua situs web dijalankan jadi bukan lintas domain.

Bagaimana saya bisa mengatasi masalah ini?

Anda harus benar-benar menjalankan server web, dan membuat permintaan get ke URI di server itu, daripada membuat permintaan get ke file; mis. ganti baris:

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

untuk membaca sesuatu seperti:

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

dan halaman permintaan awal harus dibuat melalui http juga.

Saya beruntung memulai chrome dengan sakelar berikut:

--allow-file-access-from-files

Pada os x coba (ketik ulang tanda hubung jika Anda menyalin tempel):

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

Pada proses * nix lainnya (tidak diuji)

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

atau di windows edit properti pintasan chrome dan tambahkan sakelar, mis

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

ke akhir jalur "target"

Jika Anda mengerjakan proyek front-end kecil dan ingin mengujinya secara lokal, Anda biasanya membukanya dengan mengarahkan direktori lokal Anda di browser web, misalnya memasukkan file: /// home / erick / mysuperproject / index .html di bilah URL Anda. Namun, jika situs Anda mencoba memuat sumber daya, meskipun ditempatkan di direktori lokal Anda, Anda mungkin melihat peringatan seperti ini:

XMLHttpRequest tidak dapat memuat file: ///home/erick/mysuperproject/mylibrary.js. Permintaan lintas sumber hanya didukung untuk HTTP.

Chrome dan browser modern lainnya telah menerapkan batasan keamanan untuk Permintaan Cross Origin, yang berarti Anda tidak dapat memuat apa pun melalui file: ///, Anda perlu menggunakan protokol http: // setiap saat, bahkan secara lokal -due kebijakan Same Origin. Sesederhana itu, Anda perlu memasang server web untuk menjalankan proyek Anda di sana.

Ini bukanlah akhir dari dunia dan ada banyak solusi di luar sana, termasuk Apache lama yang baik (dengan VirtualHosts jika Anda menjalankan beberapa proyek lain), node.js dengan express, server Ruby, dll. Atau hanya memodifikasi pengaturan browser.

Namun ada solusi yang lebih sederhana dan ringan untuk yang malas. Anda dapat menggunakan SimpleHTTPServer Python. Itu sudah dibundel dengan python sehingga Anda tidak perlu menginstal atau mengkonfigurasi apa pun!

Jadi, cd ke direktori proyek Anda, misalnya

1 cd / home / erick / mysuperproject dan kemudian gunakan saja

1 python -m SimpleHTTPServer Dan itu saja, Anda akan melihat pesan ini di terminal Anda

1 Melayani HTTP di 0.0.0.0 port 8000 ... Jadi sekarang Anda dapat kembali ke browser Anda dan mengunjungi http://0.0.0.0:8000dengan semua file direktori Anda disajikan di sana. Anda dapat mengkonfigurasi port dan hal lainnya, lihat saja dokumentasinya. Tapi trik sederhana ini berhasil untuk saya ketika saya sedang terburu-buru untuk menguji perpustakaan baru atau mencari ide baru.

Ini dia, selamat membuat kode!

EDIT: Dengan Python 3+, SimpleHTTPServer telah diganti dengan http.server. Jadi Di Python 3.3, misalnya, perintah berikut ini setara:

python -m http.server 8000

Saya mendapatkan kesalahan yang sama saat mencoba memuat hanya file HTML yang menggunakan data JSON untuk mengisi halaman, jadi saya menggunakan node.js dan express untuk menyelesaikan masalah. Jika Anda belum menginstal node, Anda perlu menginstal node terlebih dahulu.

1. Instal express npm install express

2. Buat file server.js di folder root proyek Anda, dalam kasus saya satu folder di atas file yang saya inginkan ke server

3. Letakkan sesuatu seperti berikut ini di file server.js dan baca tentang ini di situs gihub ekspres :

   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. Setelah Anda menyimpan server.js, Anda dapat menjalankan server menggunakan:

node server.js

5. Buka http://localhost:8000/FILENAMEdan Anda akan melihat file HTML yang Anda coba muat

Jika Anda telah menginstal nodejs, Anda dapat mengunduh dan menginstal server menggunakan baris perintah:

npm install -g http-server

Ubah direktori ke direktori tempat Anda ingin menayangkan file:

$ cd ~/projects/angular/current_project 

Jalankan server:

$ http-server 

yang akan menghasilkan pesan Memulai http-server, melayani di:

Tersedia di: http: // your_ip: 8080 dan http://127.0.0.1:8080

Itu memungkinkan Anda untuk menggunakan url di browser Anda seperti

http: // your_ip: 8080 / index.html

Ini bekerja paling baik dengan cara ini. Pastikan kedua file ada di server. Saat memanggil halaman html, gunakan alamat web seperti:, http:://localhost/myhtmlfile.htmldan bukan C::///users/myhtmlfile.html,. Jadikan juga bahwa url yang diteruskan ke json adalah alamat web seperti yang ditunjukkan di bawah ini:

$(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. ubah jalur chromeLocation dengan Anda.

2. simpan di atas sebagai file bat.

3. drag drop file Anda pada file batch yang Anda buat. (Chrome memang memberikan opsi mengembalikan halaman jadi jika Anda memiliki halaman terbuka tekan saja restore dan itu akan berfungsi).

Anda juga dapat memulai server tanpa python menggunakan interpreter php.

Misalnya:

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

Ini dapat berguna jika Anda menginginkan alternatif untuk npm, karena utilitas php sudah diinstal sebelumnya pada beberapa OS (termasuk Mac).

Untuk semua pengguna python:

Cukup masuk ke folder tujuan Anda di terminal.

cd projectFoder

lalu mulai server HTTP Untuk Python3 +:

python -m http.server 8000

Melayani HTTP di :: port 8000 (http: // [::]: 8000 /) ...

buka link Anda: http://0.0.0.0:8000/

Nikmati :)