Permintaan lintas sumber hanya didukung untuk HTTP tetapi tidak lintas domain

88

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?

javascript 
— siannone
sumber
5
Sudahkah Anda mencoba mungkin menggunakan URL HTTP alih-alih jalur lokal?
— Edward Thomson
1
Saya akan menyarankan menggunakan url lengkap
— Dominic Green
2
@EdwardThomson Berhasil! Tapi sekarang saya harus mengatur allow_url_include = Onkonfigurasi server saya.
— siannone

Jawaban:

76

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.

— Petesh
sumber
Ini bekerja seperti pesona. Sekarang saya harus mengatur allow_url_include = Onkonfigurasi server saya. Bisakah saya mengaktifkannya dengan aman atau itu akan menyebabkan beberapa masalah keamanan?
— siannone
$ .Get sebenarnya dikeluarkan dalam konteks javascript browser web, sehingga file tersebut harus memiliki referensi URL - kode yang ditulis dalam php masih dapat merujuk file lokal tanpa masalah
— Petesh
44
Alternatifnya ada solusi Python: (1) arahkan konsol ke folder, (2) enter python -m SimpleHTTPServer 8888, lalu (3) navigasikan browser kehttp://localhost:8888/
— geotheory
+1 ini sangat membantu untuk menyelesaikan masalah saya. Terima kasih banyak :)
— Praveen
5
Catatan untuk pengguna Python 3: gunakanpython -m http.server 8888
— Jelle Fresen
113

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"

— prauchfuss.dll
sumber
7
Bekerja dalam Google Chrome (setidaknya dari v24) pada prinsipnya, tetapi catatan bahwa pada OS X Anda harus memanggil sebagai berikut: open -a 'Google Chrome' --args —allow-file-access-from-files. Perhatikan juga: Jika Anda menentukan file: // - berbasis URL (bukan jalur sistem file), pastikan untuk menggunakan file://localhost/...daripada file:///....
— mklement0
6
Terakhir kali saya mencoba melakukan ini di windows, metode di atas tidak berfungsi. Saya akhirnya harus meluncurkan chrome dari DOS prompt dengan tombol berikut ... Tidak sempurna tapi bisa diterapkan.
— prauchfuss
Bekerja dengan baik di Linux.
— pengguna1205577
Berfungsi dengan baik di OS X Yosemite 10.10.2 dan Chrome Versi 41.0.2272.89 (64-bit).
— The Dude
86

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
— Pramod Alagambhat
sumber
5
Solusi malas itu luar biasa. Sangat mudah, Anda tidak perlu melakukan apa pun.
— Nico
setara ada di node.js juga: simple-http-server
— StackHola
Di Windows 8.1, Anda masih harus menginstal Python, bukan?
— J86
Saya menggunakan Xampp di windows, itu sederhana, saya akan merekomendasikan menggunakan node, juga jangan lupa untuk membuka blokir port 80 di skype untuk memungkinkan server berjalan
— Timo Huovinen
10

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

  1. Buka http://localhost:8000/FILENAMEdan Anda akan melihat file HTML yang Anda coba muat
— thehme
sumber
4

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

— Rahul Reddy
sumber
1

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);
                            }
                        });
                    }
                });
            });
— ken4ward
sumber
0 
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).

— YJDev
sumber
0

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

— Pranav Kasetti
sumber
0

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

— Shiwanshu Kumar
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.