Żądania z różnych źródeł są obsługiwane tylko w przypadku protokołu HTTP, ale nie są obsługiwane między domenami

Używam tego kodu, aby wysłać żądanie AJAX:

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

Ale z konsoli JavaScript Google Chrome ciągle otrzymuję ten błąd:

XMLHttpRequest nie może załadować pliku: /// C: /xampp/htdocs/webname/resources/templates/signup.php. Żądania z różnych źródeł są obsługiwane tylko w przypadku protokołu HTTP.

Problem polega na tym, że plik signup.php jest hostowany na moim lokalnym serwerze WWW, z którego jest uruchamiana cała witryna, więc nie jest międzydomenowa.

Jak mogę rozwiązać ten problem?

Musisz faktycznie uruchomić serwer WWW i wysłać żądanie get do URI na tym serwerze, zamiast wysyłać żądanie get do pliku; np. zmień linię:

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

przeczytać coś takiego:

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

a strona z początkowym żądaniem również musi zostać przesłana za pośrednictwem protokołu http.

Miałem szczęście, uruchamiając chrome za pomocą następującego przełącznika:

--allow-file-access-from-files

Na os x try (wpisz myślniki, jeśli skopiujesz wklej):

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

Na innym przebiegu * nix (nie testowano)

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

lub na windows edytuj właściwości skrótu chrome i dodaj przełącznik np

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

do końca ścieżki „docelowej”

Jeśli pracujesz nad małym projektem frontendowym i chcesz przetestować go lokalnie, zazwyczaj otwierasz go, wskazując katalog lokalny w przeglądarce internetowej, na przykład wpisując file: /// home / erick / mysuperproject / index .html na pasku adresu URL. Jeśli jednak witryna próbuje załadować zasoby, nawet jeśli są one umieszczone w katalogu lokalnym, możesz zobaczyć takie ostrzeżenia:

XMLHttpRequest nie może załadować pliku: ///home/erick/mysuperproject/mylibrary.js. Żądania z różnych źródeł są obsługiwane tylko w przypadku protokołu HTTP.

Chrome i inne nowoczesne przeglądarki mają zaimplementowane ograniczenia bezpieczeństwa dla żądań z różnych źródeł, co oznacza, że ​​nie można wczytywać niczego za pośrednictwem pliku: ///, zawsze należy używać protokołu http: //, nawet lokalnie zgodnie z zasadami tego samego pochodzenia. To proste, musisz zamontować serwer WWW, aby uruchomić tam swój projekt.

To nie koniec świata i istnieje wiele rozwiązań, w tym stary dobry Apache (z VirtualHosts, jeśli prowadzisz kilka innych projektów), node.js z express, serwer Ruby itp. Lub po prostu modyfikując ustawienia wyszukiwarki.

Jest jednak prostsze i lżejsze rozwiązanie dla leniwych. Możesz użyć SimpleHTTPServer Pythona. Jest już w pakiecie z Pythonem, więc nie musisz niczego instalować ani konfigurować!

Na przykład cd do katalogu swojego projektu

1 cd / home / erick / mysuperproject, a następnie po prostu użyj

1 python -m SimpleHTTPServer I to wszystko, zobaczysz ten komunikat w swoim terminalu

1 Obsługa HTTP na porcie 0.0.0.0 8000 ... Więc teraz możesz wrócić do przeglądarki i odwiedzić http://0.0.0.0:8000wszystkie pliki katalogowe, które są tam obsługiwane. Możesz skonfigurować port i inne rzeczy, po prostu zapoznaj się z dokumentacją. Ale ta sztuczka działa dla mnie, gdy spieszy mi się, aby przetestować nową bibliotekę lub opracować nowy pomysł.

Proszę bardzo, miłego kodowania!

EDYCJA: W Pythonie 3+ SimpleHTTPServer został zastąpiony przez http.server. Na przykład w Pythonie 3.3 następujące polecenie jest równoważne:

python -m http.server 8000

Otrzymałem ten sam błąd podczas próby załadowania po prostu plików HTML, które używały danych JSON do zapełnienia strony, więc użyłem node.js i express, aby rozwiązać problem. Jeśli nie masz zainstalowanego węzła, musisz najpierw zainstalować go .

1. Zainstaluj Express npm install express

2. Utwórz plik server.js w folderze głównym swojego projektu, w moim przypadku jeden folder nad plikami, które chciałem na serwerze

3. Umieść coś takiego w pliku server.js i przeczytaj o tym w witrynie express 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. Po zapisaniu server.js możesz uruchomić serwer używając:

node server.js

5. Przejdź do http://localhost:8000/FILENAMEi powinieneś zobaczyć plik HTML, który próbujesz załadować

Jeśli masz zainstalowany nodejs, możesz pobrać i zainstalować serwer za pomocą wiersza poleceń:

npm install -g http-server

Zmień katalogi na katalog, z którego chcesz udostępniać pliki:

$ cd ~/projects/angular/current_project 

Uruchom serwer:

$ http-server 

co spowoduje wyświetlenie komunikatu Uruchamianie serwera http, obsługującego:

Dostępne na: http: // your_ip: 8080 i http://127.0.0.1:8080

To pozwala na używanie adresów URL w przeglądarce, takich jak

http: // your_ip: 8080 / index.html

W ten sposób działa najlepiej. Upewnij się, że oba pliki znajdują się na serwerze. Wywołując stronę html, użyj adresu internetowego, takiego jak:, http:://localhost/myhtmlfile.htmla nie C::///users/myhtmlfile.html,. Daj nam również znać, że adres URL przekazany do json jest adresem internetowym, jak wskazano poniżej:

$(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. zmień ścieżkę chromeLocation na swoją.

2. zapisz powyżej jako plik .bat.

3. przeciągnij upuść plik na utworzony plik wsadowy. (Chrome daje jednak opcję przywracania stron, więc jeśli masz otwarte strony, po prostu naciśnij Przywróć i zadziała).

Możesz także uruchomić serwer bez języka Python za pomocą interpretera php.

Na przykład:

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

Może to być przydatne, jeśli potrzebujesz alternatywy dla npm, ponieważ narzędzie php jest preinstalowane w niektórych systemach operacyjnych (w tym na Macu).

Dla wszystkich użytkowników Pythona:

Po prostu przejdź do folderu docelowego w terminalu.

cd projectFoder

następnie uruchom serwer HTTP Dla Python3 +:

python -m http.server 8000

Udostępnianie HTTP na :: port 8000 (http: // [::]: 8000 /) ...

przejdź do swojego linku: http://0.0.0.0:8000/

Cieszyć się :)