Çapraz kaynak istekleri yalnızca HTTP için desteklenir, ancak alanlar arası değildir

AJAX talebinde bulunmak için bu kodu kullanıyorum:

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

Ancak Google Chrome JavaScript konsolundan şu hatayı almaya devam ediyorum:

XMLHttpRequest file: /// C: /xampp/htdocs/webname/resources/templates/signup.php dosyasını yükleyemiyor. Çapraz kaynak istekleri yalnızca HTTP için desteklenir.

Sorun şu ki, signup.php dosyası, tüm web sitesinin çalıştırıldığı yerel web sunucumda barındırılıyor, bu nedenle etki alanları arası değil.

Bu sorunu nasıl çözebilirim?

Bir dosyaya alma isteği yapmak yerine, gerçekten bir web sunucusu çalıştırmanız ve o sunucu üzerindeki bir URI'ye alma isteğinde bulunmanız gerekir; örneğin satırı değiştirin:

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

gibi bir şey okumak için:

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

ve ilk istek sayfasının da http üzerinden yapılması gerekir.

Aşağıdaki anahtarla Chrome'u başlatma şansım oldu:

--allow-file-access-from-files

OS X'de deneyin (kopyalayıp yapıştırırsanız çizgileri yeniden yazın):

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

Diğer * nix çalışmasında (test edilmemiştir)

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

veya pencerelerde krom kısayolunun özelliklerini düzenleyin ve anahtarı ekleyin, ör.

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

"hedef" yolun sonuna

Küçük bir ön uç projesi üzerinde çalışıyorsanız ve yerel olarak test etmek istiyorsanız, tipik olarak web tarayıcısında yerel dizininizi işaret ederek açarsınız, örneğin file: /// home / erick / mysuperproject / index URL çubuğunuzda .html. Bununla birlikte, siteniz, yerel dizininize yerleştirilmiş olsalar bile kaynakları yüklemeye çalışıyorsa, aşağıdaki gibi uyarılar görebilirsiniz:

XMLHttpRequest şu dosyayı yükleyemiyor: ///home/erick/mysuperproject/mylibrary.js. Çapraz kaynak istekleri yalnızca HTTP için desteklenir.

Chrome ve diğer modern tarayıcılar, Cross Origin Requests için güvenlik kısıtlamaları uyguladı; bu, file: /// yoluyla hiçbir şey yükleyemeyeceğiniz anlamına gelir, her zaman http: // protokolünü kullanmanız gerekir, hatta yerel olarak - Aynı Kaynak politikaları nedeniyle. Bu kadar basit, projenizi orada çalıştırmak için bir web sunucusu bağlamanız gerekir.

Bu dünyanın sonu değil ve eski güzel Apache (birkaç başka proje çalıştırıyorsanız VirtualHosts ile), express ile node.js, Ruby sunucusu vb. Dahil olmak üzere pek çok çözüm var. tarayıcı ayarları.

Ancak tembeller için daha basit ve hafif bir çözüm var. Python'un SimpleHTTPServer'ını kullanabilirsiniz. Python ile birlikte gelir, böylece hiçbir şey yüklemenize veya yapılandırmanıza gerek kalmaz!

Örneğin proje dizininize cd

1 cd / home / erick / mysuperproject ve sonra basitçe kullanın

1 python -m SimpleHTTPServer İşte bu kadar, bu mesajı terminalinizde göreceksiniz

1 0.0.0.0 portu 8000 üzerinde HTTP hizmeti veriyor ... Böylece artık tarayıcınıza geri dönebilir ve http://0.0.0.0:8000orada sunulan tüm dizin dosyalarınızı ziyaret edebilirsiniz . Bağlantı noktasını ve diğer şeyleri yapılandırabilirsiniz, sadece belgelere bakın. Ancak bu basit numara, yeni bir kitaplığı test etmek veya yeni bir fikir bulmak için acele ettiğimde işe yarıyor.

Buyurun, mutlu kodlama!

DÜZENLEME: Python 3+ sürümünde SimpleHTTPServer, http.server ile değiştirilmiştir. Örneğin Python 3.3'te aşağıdaki komut eşdeğerdir:

python -m http.server 8000

Sayfayı doldurmak için JSON verilerini kullanan basit HTML dosyalarını yüklemeye çalışırken aynı hatayı alıyordum, bu yüzden sorunu çözmek için node.js ve express kullandım. Eğer düğüm yüklü yoksa yapmanız gerekir düğüm yüklemek ilk.

1. Ekspres yükle npm install express

2. Projenizin kök klasöründe bir server.js dosyası oluşturun, benim durumumda sunucuya sunmak istediğim dosyaların bir klasörünün üzerinde

3. Server.js dosyasına aşağıdakine benzer bir şey koyun ve bunu ekspres gihub sitesinde okuyun:

   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'yi kaydettikten sonra, sunucuyu kullanarak çalıştırabilirsiniz:

node server.js

5. Adresine gidin http://localhost:8000/FILENAMEve yüklemeye çalıştığınız HTML dosyasını görmelisiniz.

Nodejs yüklüyse, sunucuyu komut satırını kullanarak indirip kurabilirsiniz:

npm install -g http-server

Dizinleri, dosyaları sunmak istediğiniz dizine değiştirin:

$ cd ~/projects/angular/current_project 

Sunucuyu çalıştırın:

$ http-server 

bu, http-server başlatılıyor, hizmet veriyor:

Şurada bulunabilir : http: // your_ip: 8080 ve http://127.0.0.1:8080

Bu, tarayıcınızda URL'leri aşağıdaki gibi kullanmanıza olanak tanır

http: // your_ip: 8080 / index.html

Bu en iyi şekilde çalışır. Her iki dosyanın da sunucuda olduğundan emin olun. Html sayfasını çağırırken, gibi web adresini kullanın, http:://localhost/myhtmlfile.htmldeğil, kullanın C::///users/myhtmlfile.html. Json'a iletilen url'nin aşağıda belirtildiği gibi bir web adresi olduğunu da kullanın:

$(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 yolunu sizinkiyle değiştirin.

2. yukarıyı .bat dosyası olarak kaydedin.

3. dosyanızı oluşturduğunuz toplu iş dosyasına sürükleyin. (Chrome, sayfaları geri yükleme seçeneği sunar, bu nedenle, açık sayfalarınız varsa, yalnızca geri yükle düğmesine basın ve çalışacaktır).

Ayrıca php yorumlayıcı kullanarak python olmadan bir sunucu başlatabilirsiniz.

Örneğin:

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

Php yardımcı programı bazı işletim sistemlerinde (Mac dahil) önceden yüklenmiş olarak geldiğinden, npm'ye bir alternatif istiyorsanız bu yararlı olabilir.

Tüm python kullanıcıları için:

Terminaldeki hedef klasörünüze gitmeniz yeterlidir.

cd projectFoder

ardından Python3 + için HTTP sunucusunu başlatın:

python -m http.server 8000

HTTP sunucusu :: port 8000 (http: // [::]: 8000 /) ...

bağlantınıza gidin: http://0.0.0.0:8000/

Zevk almak :)