XMLHttpRequest kann Datei nicht laden. Cross-Ursprungsanforderungen werden nur für HTTP unterstützt

Ich erhalte den folgenden Fehler:

XMLHttpRequest cannot load file:///C:/Users/richa.agiwal/Desktop/get/rm_Library/templates/template_viewSettings.html. Cross origin requests are only supported for HTTP. 

Ich weiß, dass diese Frage schon beantwortet wurde, aber ich habe immer noch keine Lösung für mein Problem gefunden. Ich habe versucht, chrome.exe --allow-file-access-from-files von der Eingabeaufforderung auszuführen und die Datei in das lokale Dateisystem verschoben, aber ich bekomme immer noch den gleichen Fehler.

Ich freue mich über Vorschläge!

Wenn Sie HTML und JavaScript in einem Code-Editor auf Ihrem PC schreiben und die Ausgabe in Ihrem Browser testen, erhalten Sie wahrscheinlich Fehlermeldungen über Cross Origin Requests . Ihr Browser wird HTML rendern und Javascript, jQuery, angularJs in Ihrem Browser ausführen, ohne dass ein Server eingerichtet werden muss. Viele Webbrowser sind jedoch so programmiert, dass sie auf Cross-Site-Angriffe achten und Anfragen blockieren. Sie möchten nicht, dass jemand Ihre Festplatte von Ihrem Webbrowser aus lesen kann. Sie können eine voll funktionsfähige Webseite mit Notepad ++ erstellen, auf der Javascript ausgeführt wird, und Frameworks wie jQuery und angularJs; und testen Sie alles einfach mit dem Notepad ++ Menü, RUN, LAUNCH IN FIREFOX . Das ist eine nette, einfache Möglichkeit, mit dem Erstellen einer Webseite zu beginnen. Wenn Sie jedoch mehr als nur Layout, CSS und einfache Seitennavigation erstellen, benötigen Sie einen lokalen Server, der auf Ihrem Computer eingerichtet ist.

Hier sind einige Optionen, die ich verwende.

  1. Testen Sie Ihre Webseite lokal in Firefox und stellen Sie sie dann auf Ihrem Host bereit.
  2. oder: Führen Sie einen lokalen Server aus

Test auf Firefox, Bereitstellen auf Host

  1. Firefox erlaubt derzeit Cross-Origin-Anfragen von Dateien, die von Ihrer Festplatte geliefert werden
  2. Ihre Webhosting-Site wird Anfragen an Dateien in Ordnern zulassen, die von der Manifestdatei konfiguriert wurden

Führen Sie einen lokalen Server aus

  • Führen Sie einen Server auf Ihrem Computer wie Apache oder Python aus
  • Python ist kein Server, aber es wird ein einfacher Server laufen

Führen Sie einen lokalen Server mit Python aus

Erhalten Sie Ihre IP-Adresse:

  • Unter Windows: Öffnen Sie die ‘Eingabeaufforderung’. Alle Programme, Zubehör, Eingabeaufforderung
  • Ich Command Prompt immer die Command Prompt als Administrator . Klicken Sie mit der rechten Maustaste auf den Command Prompt , und suchen Run As Administrator Command Prompt
  • Geben Sie den folgenden Befehl ein: ipconfig und ipconfig die Eingabetaste.
  • Suchen Sie nach: IPv4-Adresse. . . . . . . . 12.123.123.00
  • Es gibt Websites, auf denen auch Ihre IP-Adresse angezeigt wird

Wenn Sie Python nicht haben, laden Sie es herunter und installieren Sie es.

Mit der ‘Eingabeaufforderung’ müssen Sie zu dem Ordner gehen, in dem sich die Dateien befinden, die Sie als Webseite bereitstellen möchten.

  • Wenn Sie zum C: \ Root-Verzeichnis zurückkehren müssen, geben Sie cd /
  • Geben Sie cd Drive: \ Folder \ Folder \ etc ein, um zu dem Ordner zu gelangen, in dem sich Ihre .Html-Datei befindet (oder php, etc)
  • Überprüfen Sie den Pfad. Geben Sie Folgendes ein: Pfad an der Eingabeaufforderung. Sie müssen den Pfad zu dem Ordner sehen, in dem sich Python befindet. Wenn sich Python beispielsweise in C: \ Python27 befindet, müssen Sie diese Adresse in den aufgeführten Pfaden sehen.
  • Wenn der Pfad zum Python-Verzeichnis nicht im Pfad enthalten ist, müssen Sie den Pfad festlegen. Geben Sie help path ein und drücken Sie Enter. Sie werden Hilfe für den Pfad sehen.
  • Geben Sie Folgendes ein: Pfad c: \ python27% Pfad%
  • % path% behält alle Ihre aktuellen Pfade bei. Sie möchten nicht alle Ihre aktuellen Pfade löschen, sondern fügen einfach einen neuen Pfad hinzu.
  • Erstellen Sie den neuen Pfad aus dem Ordner, in dem Sie die Dateien bereitstellen möchten.
  • Starten Sie den Python-Server: python -m SimpleHTTPServer port : python -m SimpleHTTPServer port Dabei steht ‘port’ für die Nummer des python -m SimpleHTTPServer port , z. B. python -m SimpleHTTPServer 1337
  • Wenn Sie den Port leer lassen, wird standardmäßig Port 8000 verwendet
  • Wenn der Python-Server erfolgreich gestartet wird, sehen Sie eine Nachricht.

Führen Sie Ihre Webanwendung lokal aus

  • Öffnen Sie einen Browser
  • http://your IP address:port in die Adresszeile ein: http://your IP address:port
  • http://xxx.xxx.xx:1337 oder http://xx.xxx.xxx.xx:8000 für den Standardwert
  • Wenn der Server funktioniert, sehen Sie eine Liste Ihrer Dateien im Browser
  • Klicken Sie auf die Datei, die Sie bereitstellen möchten, und es sollte angezeigt werden.

Fortgeschrittene Lösungen

  • Installieren Sie einen Code-Editor, einen Webserver und andere integrierte Dienste.

Sie können Apache, PHP, Python, SQL, Debugger usw. alle separat auf Ihrem Computer installieren und dann viel Zeit damit verbringen, herauszufinden, wie sie alle zusammenarbeiten können, oder nach einer Lösung suchen, die all diese Dinge vereint.

Ich verwende gerne XAMPP mit NetBeans IDE. Sie können auch WAMP installieren, das eine User Interface für die Verwaltung und Integration von Apache und anderen Diensten bereitstellt.

Einfache Lösung

Wenn Sie mit reinen html / js / css-Dateien arbeiten.

Installiere diese kleine Server ( Link ) App in Chrome. Öffnen Sie die App und zeigen Sie den Speicherort der Datei auf Ihr Projektverzeichnis.

Gehe zur URL, die in der App angezeigt wird.

Edit: Intelligentere Lösung mit Gulp

Schritt 1: Installieren von Gulp. Führen Sie den folgenden Befehl in Ihrem Terminal aus.

 npm install gulp-cli -g npm install gulp -D 

Schritt 2: Erstellen Sie in Ihrem Projektverzeichnis eine Datei namens gulpfile.js. Kopieren Sie den folgenden Inhalt darin.

 var gulp = require('gulp'); var bs = require('browser-sync').create(); gulp.task('serve', [], () => { bs.init({ server: { baseDir: "./", }, port: 5000, reloadOnRestart: true, browser: "google chrome" }); gulp.watch('./**/*', ['', bs.reload]); }); 

Schritt 3: Installieren Sie das Browser-Sync-Gulp-Plugin. Führen Sie im selben Verzeichnis, in dem gulpfile.js vorhanden ist, den folgenden Befehl aus

 npm install browser-sync gulp --save-dev 

Schritt 4: Starten Sie den Server. Führen Sie im selben Verzeichnis, in dem gulpfile.js vorhanden ist, den folgenden Befehl aus

 gulp serve 

Dieser Fehler tritt auf, weil Sie gerade HTML-Dokumente direkt aus dem Browser öffnen. Um dies zu beheben, müssen Sie Ihren Code von einem Webserver aus bereitstellen und auf localhost zugreifen. Wenn Sie Apache Setup haben, verwenden Sie es, um Ihre Dateien zu liefern. Einige IDEs haben eingebaute Webserver, wie JetBrains IDEs, Eclipse …

Wenn Sie Node.Js eingerichtet haben, können Sie http-server verwenden . Führen Sie einfach npm install http-server -g und Sie können es in Terminal wie http-server C:\location\to\app. Kirill Fuchs

Ich war mit diesem Fehler konfrontiert, als ich mein Web-API-Projekt lokal implementierte und das API-Projekt nur mit der unten angegebenen URL aufruft:

localhost // myAPIProject

Da die Fehlermeldung besagt, dass es nicht http: // ist, änderte ich die URL und setzte ein Präfix http wie unten angegeben und der Fehler war weg.

http: // localhost // myAPIProject

Wenn Sie die JavaScript-WebStorm-IDE verwenden , können Sie Ihr Projekt einfach über WebStorm in Ihrem Browser öffnen. WebStorm startet automatisch einen Server und Sie werden keinen dieser Fehler mehr bekommen, weil Sie nun auf die Dateien mit den erlaubten / unterstützten Protokollen (HTTP) zugreifen.

Hängt von Ihren Bedürfnissen ab, aber es gibt auch eine schnelle Möglichkeit, Ihren (Dummy-) JSON vorübergehend zu überprüfen, indem Sie Ihren JSON unter http://myjson.com speichern. Kopieren Sie den API-Link und fügen Sie diesen in Ihren JavaScript-Code ein. Viola! Wenn Sie die Codes bereitstellen möchten, dürfen Sie nicht vergessen, diese URL in Ihren Codes zu ändern!

Platziere deinen Projektordner in den htdocs des Xampp-Verzeichnisses Starte deinen Apache-Server mit dem xampp-Kontrollfeld, öffne dann einen Browser, gehe zu localhost / projectfolder, dann fängt es an zu arbeiten