XMLHttpRequest kann keine Datei laden. Ursprungsübergreifende Anforderungen werden nur für HTTP unterstützt

Ich erhalte die folgende Fehlermeldung:

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

Mir ist klar, dass diese Frage bereits 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über die Eingabeaufforderung zu laufen , und die Datei in das lokale Dateisystem verschoben, aber es wird immer noch der gleiche Fehler angezeigt.

Ich freue mich über Vorschläge!

Wenn Sie beispielsweise HTML und Javascript in einem Code-Editor auf Ihrem PC schreiben und die Ausgabe in Ihrem Browser testen, werden Sie wahrscheinlich Fehlermeldungen erhalten Cross Origin Requests. Ihr Browser rendert HTML und führt Javascript, jQuery und angleJs in Ihrem Browser aus, ohne dass ein Server eingerichtet werden muss. Viele Webbrowser sind jedoch so programmiert, dass sie auf Cross-Site-Angriffe achten und Anforderungen blockieren. Sie möchten nicht, dass nur jemand Ihre Festplatte über Ihren Webbrowser lesen kann. Sie können mit Notepad ++ eine voll funktionsfähige Webseite erstellen, auf der Javascript und Frameworks wie jQuery und angleJs ausgeführt werden. und testen Sie alles einfach mit dem Menüpunkt Notepad ++.RUN, LAUNCH IN FIREFOX. Dies ist eine schöne und einfache Möglichkeit, eine Webseite zu erstellen. Wenn Sie jedoch mehr als Layout, CSS und einfache Seitennavigation erstellen, müssen Sie einen lokalen Server auf Ihrem Computer einrichten.

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

Auf Firefox testen, auf Host bereitstellen

1. Firefox erlaubt derzeit Cross Origin-Anfragen von Dateien, die von Ihrer Festplatte bereitgestellt werden
2. Ihre Webhosting-Site ermöglicht Anforderungen an Dateien in Ordnern, wie in der Manifestdatei konfiguriert

Führen Sie einen lokalen Server aus

• Führen Sie einen Server auf Ihrem Computer aus, z. B. Apache oder Python
• Python ist kein Server, aber es wird ein einfacher Server ausgeführt

Führen Sie einen lokalen Server mit Python aus

Holen Sie sich Ihre IP-Adresse:

• Unter Windows: Öffnen Sie die Eingabeaufforderung. Alle Programme, Zubehör, Eingabeaufforderung
• Ich führe immer das Command Promptals Administrator. Klicken Sie mit der rechten Maustaste auf den Command PromptMenüpunkt und suchen Sie nachRun As Administrator
• ipconfigGeben Sie den Befehl ein: und drücken Sie 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.

Über die Eingabeaufforderung müssen Sie zu dem Ordner wechseln, in dem sich die Dateien befinden, die Sie als Webseite verwenden möchten.

• Wenn Sie zum Verzeichnis C: \ Root zurückkehren müssen, geben Sie cd / ein
• Geben Sie cd Drive: \ Folder \ Folder \ etc ein, um zu dem Ordner zu gelangen, in dem sich Ihre HTML-Datei befindet (oder PHP usw.).
• Überprüfen Sie den Pfad. Geben Sie an der Eingabeaufforderung Folgendes ein: path. Sie müssen den Pfad zu dem Ordner sehen, in dem sich Python befindet. Wenn sich Python beispielsweise in C: \ Python27 befindet, muss diese Adresse in den aufgelisteten Pfaden angezeigt werden.
• Wenn sich der Pfad zum Python-Verzeichnis nicht im Pfad befindet, müssen Sie den Pfad festlegen. Geben Sie: help path ein und drücken Sie die Eingabetaste. Sie sehen Hilfe für den Pfad.
• 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 nur einen neuen Pfad hinzufügen.
• Erstellen Sie den neuen Pfad aus dem Ordner, in dem Sie die Dateien bereitstellen möchten.
• Starten Sie den Python-Server: Geben Sie Folgendes ein: python -m SimpleHTTPServer portDabei ist "Port" beispielsweise die Nummer des gewünschten Portspython -m SimpleHTTPServer 1337
• Wenn Sie den Port leer lassen, wird standardmäßig Port 8000 verwendet
• Wenn der Python-Server erfolgreich gestartet wurde, wird eine Nachricht angezeigt.

Führen Sie Ihre Webanwendung lokal aus

• Öffnen Sie einen Browser
• In der Adresszeilentyp: http://your IP address:port
• http://xxx.xxx.x.x:1337 oder http://xx.xxx.xxx.xx:8000für die Standardeinstellung
• Wenn der Server funktioniert, wird im Browser eine Liste Ihrer Dateien angezeigt
• Klicken Sie auf die Datei, die Sie bereitstellen möchten, und sie sollte angezeigt werden.

Fortgeschrittenere Lösungen

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

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

Ich benutze gerne XAMPP mit NetBeans IDE. Sie können auch WAMP installieren, mit dem Sie User InterfaceApache und andere Dienste verwalten und integrieren können.

Einfache Lösung

Wenn Sie mit reinen HTML / JS / CSS-Dateien arbeiten.

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

Gehe zu der in der App angezeigten URL.

Bearbeiten: Intelligentere Lösung mit Gulp

Schritt 1: So installieren Sie 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 mit dem Namen gulpfile.js. Kopieren Sie den folgenden Inhalt.

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 in demselben 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 in demselben Verzeichnis, in dem gulpfile.js vorhanden ist, den folgenden Befehl aus

gulp serve

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

Wenn Sie Node.Js eingerichtet haben, können Sie den http-Server verwenden . Laufen npm install http-server -gSie einfach und Sie können es in einem Terminal wie http-server C:\location\to\app. Kirill Fuchs verwenden

Zu Alan Wells 'ausführlicher Antwort hier hinzuzufügen, ist eine schnelle Lösung

Führen Sie einen lokalen Server aus

Mit Serve können Sie jeden Ordner auf Ihrem Computer bereitstellen

Navigieren Sie zunächst über die Befehlszeile in den Ordner, den Sie bereitstellen möchten.

Dann

npx i -g serve
serve

oder wenn Sie Serve mit dem Herunterladen testen möchten

npx serve

und das ist es! Sie können Ihre Dateien unter http: // localhost: 5000 anzeigen

Dieser Fehler trat auf, als ich mein Web-API-Projekt lokal bereitstellte und das API-Projekt nur mit der unten angegebenen URL aufrief:

localhost // myAPIProject

Da die Fehlermeldung besagt, dass es nicht http: // ist, habe ich die URL geändert und ein Präfix http wie unten angegeben eingegeben, und der Fehler war verschwunden.

http: // localhost // myAPIProject

Wenn Sie die WebStorm-Javascript-IDE verwenden , können Sie Ihr Projekt einfach über WebStorm in Ihrem Browser öffnen. WebStorm startet automatisch einen Server und Sie erhalten keinen dieser Fehler mehr, da Sie jetzt mit den zulässigen / unterstützten Protokollen (HTTP) auf die Dateien zugreifen.

Hängt von Ihren Anforderungen ab, aber es gibt auch eine schnelle Möglichkeit, Ihren (Dummy-) JSON vorübergehend zu überprüfen, indem Sie Ihren JSON auf http://myjson.com speichern . Kopieren Sie den API-Link und fügen Sie ihn 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!

Platzieren Sie Ihren Projektordner in den htdocs des Xampp-Verzeichnisses. Starten Sie Ihren Apache-Server über das xampp-Kontrollfeld, öffnen Sie einen Browser, gehen Sie zu localhost / projectfolder, und er funktioniert