Ursprungsübergreifende Anforderungen werden nur für HTTP unterstützt, jedoch nicht domänenübergreifend

Ich verwende diesen Code, um eine AJAX-Anfrage zu stellen:

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

Aber von der Google Chrome JavaScript-Konsole erhalte ich immer wieder den folgenden Fehler:

XMLHttpRequest kann die Datei nicht laden: /// C: /xampp/htdocs/webname/resources/templates/signup.php. Ursprungsübergreifende Anforderungen werden nur für HTTP unterstützt.

Das Problem ist, dass die Datei signup.php auf meinem lokalen Webserver gehostet wird, auf dem die gesamte Website ausgeführt wird, sodass sie nicht domänenübergreifend ist.

Wie kann ich dieses Problem lösen?

Sie müssen tatsächlich einen Webserver ausführen und die Get-Anforderung an einen URI auf diesem Server senden, anstatt die Get-Anforderung an eine Datei zu senden. zB die Zeile ändern:

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

etwas zu lesen wie:

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

und die erste Anforderungsseite muss auch über http erstellt werden.

Ich hatte Glück, Chrom mit dem folgenden Schalter zu starten:

--allow-file-access-from-files

Versuchen Sie auf os x (geben Sie die Bindestriche erneut ein, wenn Sie kopieren und einfügen):

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

Auf einem anderen * nix-Lauf (nicht getestet)

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

oder unter Windows bearbeiten Sie die Eigenschaften der Chrome-Verknüpfung und fügen Sie den Schalter hinzu, z

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

bis zum Ende des "Ziel" -Pfads

Wenn Sie an einem kleinen Front-End-Projekt arbeiten und es lokal testen möchten, öffnen Sie es normalerweise, indem Sie auf Ihr lokales Verzeichnis im Webbrowser zeigen und beispielsweise die Datei /// home / erick / mysuperproject / index eingeben .html in Ihrer URL-Leiste. Wenn Ihre Site jedoch versucht, Ressourcen zu laden, selbst wenn diese in Ihrem lokalen Verzeichnis abgelegt sind, werden möglicherweise folgende Warnungen angezeigt:

XMLHttpRequest kann die Datei ///home/erick/mysuperproject/mylibrary.js nicht laden. Ursprungsübergreifende Anforderungen werden nur für HTTP unterstützt.

Chrome und andere moderne Browser haben Sicherheitsbeschränkungen für Cross Origin-Anforderungen implementiert. Dies bedeutet, dass Sie nichts über file: /// laden können. Sie müssen jederzeit das http: // -Protokoll verwenden, auch lokal aufgrund der gleichen Origin-Richtlinien. So einfach ist das: Sie müssen einen Webserver bereitstellen, um Ihr Projekt dort auszuführen.

Dies ist nicht das Ende der Welt und es gibt viele Lösungen, einschließlich des guten alten Apache (mit VirtualHosts, wenn Sie mehrere andere Projekte ausführen), node.js mit Express, einem Ruby-Server usw. oder einfach dem Ändern Ihres Browsereinstellungen.

Es gibt jedoch eine einfachere und leichtere Lösung für die Faulen. Sie können Pythons SimpleHTTPServer verwenden. Es ist bereits im Lieferumfang von Python enthalten, sodass Sie überhaupt nichts installieren oder konfigurieren müssen!

So zum Beispiel CD in Ihr Projektverzeichnis

1 cd / home / erick / mysuperproject und dann einfach benutzen

1 Python -m SimpleHTTPServer Und das war's, diese Meldung wird in Ihrem Terminal angezeigt

1 HTTP auf 0.0.0.0 Port 8000 bereitstellen ... Jetzt können Sie zu Ihrem Browser zurückkehren und http://0.0.0.0:8000alle dort bereitgestellten Verzeichnisdateien aufrufen. Sie können den Port und andere Dinge konfigurieren, lesen Sie einfach die Dokumentation. Aber dieser einfache Trick funktioniert für mich, wenn ich es eilig habe, eine neue Bibliothek zu testen oder eine neue Idee auszuarbeiten.

Los geht's, viel Spaß beim Codieren!

BEARBEITEN: In Python 3+ wurde SimpleHTTPServer durch http.server ersetzt. In Python 3.3 ist beispielsweise der folgende Befehl äquivalent:

python -m http.server 8000

Beim Versuch, einfach HTML-Dateien zu laden, die JSON-Daten zum Auffüllen der Seite verwendeten, wurde der gleiche Fehler angezeigt. Daher habe ich node.js und express verwendet, um das Problem zu lösen. Wenn Sie keinen Knoten installiert haben, müssen Sie Knoten installieren zuerst.

1. Installieren Sie Express npm install express

2. Erstellen Sie eine server.js-Datei im Stammordner Ihres Projekts, in meinem Fall einen Ordner über den Dateien, die ich als Server verwenden wollte

3. Fügen Sie Folgendes in die Datei server.js ein und lesen Sie dies auf der Express- Gihub-Site:

   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. Nachdem Sie server.js gespeichert haben, können Sie den Server ausführen mit:

node server.js

5. Gehen Sie zu http://localhost:8000/FILENAMEund Sie sollten die HTML-Datei sehen, die Sie laden wollten

Wenn Sie nodejs installiert haben, können Sie den Server über die Befehlszeile herunterladen und installieren:

npm install -g http-server

Ändern Sie die Verzeichnisse in das Verzeichnis, in dem Sie Dateien bereitstellen möchten:

$ cd ~/projects/angular/current_project 

Führen Sie den Server aus:

$ http-server 

Dadurch wird die Meldung gestartet. http-server wird gestartet und bereitgestellt auf:

Verfügbar unter: http: // your_ip: 8080 und http://127.0.0.1:8080

So können Sie URLs in Ihrem Browser wie verwenden

http: // your_ip: 8080 / index.html

Auf diese Weise funktioniert es am besten. Stellen Sie sicher, dass sich beide Dateien auf dem Server befinden. Verwenden Sie beim Aufrufen der HTML-Seite die Webadresse wie: http:://localhost/myhtmlfile.htmlund nicht C::///users/myhtmlfile.html. Stellen Sie außerdem sicher, dass die an json übergebene URL eine Webadresse ist, wie unten angegeben:

$(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. Ändern Sie den chromeLocation-Pfad mit Ihrem.

2. oben als .bat-Datei speichern.

3. Ziehen Sie Ihre Datei auf die von Ihnen erstellte Batchdatei. (Chrome bietet jedoch die Option zum Wiederherstellen von Seiten. Wenn Sie also geöffnete Seiten haben, klicken Sie einfach auf Wiederherstellen, und es funktioniert).

Sie können einen Server auch ohne Python mit dem PHP-Interpreter starten.

Z.B:

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

Dies kann nützlich sein, wenn Sie eine Alternative zu npm wünschen, da das PHP-Dienstprogramm auf einigen Betriebssystemen (einschließlich Mac) vorinstalliert ist.