"Cross Origin-Anforderungen werden nur für HTTP unterstützt." Fehler beim Laden einer lokalen Datei

Nur um genau zu sein - Ja, der Fehler besagt, dass Sie Ihren Browser nicht direkt auf file://some/path/some.html richten können.

Mit den folgenden Optionen können Sie einen lokalen Webserver schnell hochfahren, damit Ihr Browser lokale Dateien darstellen kann

Python 2

Wenn Sie Python installiert haben ...

1. Wechseln Sie das Verzeichnis in den Ordner, in dem sich Ihre Datei some.html oder Datei (en) befindet, mit dem Befehl cd /path/to/your/folder.

2. Starten Sie einen Python-Webserver mit dem Befehl python -m SimpleHTTPServer.

Dadurch wird ein Webserver gestartet, um Ihre gesamte Verzeichnisliste unter http://localhost:8000 zu hosten.

3. Sie können einen benutzerdefinierten Port python -m SimpleHTTPServer 9000 verwenden, der einen Link enthält: http://localhost:9000

Dieser Ansatz ist in jede Python-Installation integriert.

Python 3

Führen Sie die gleichen Schritte aus, verwenden Sie jedoch stattdessen den folgenden Befehl: python3 -m http.server

Node.js

Alternativ, wenn Sie ein ansprechenderes Setup verlangen und bereits nodejs verwenden ...

1. Installieren Sie http-server, indem Sie npm install -g http-server eingeben.

2. Wechseln Sie in Ihr Arbeitsverzeichnis, wo sich Ihr some.html befindet 

3. Starten Sie Ihren http-Server, indem Sie http-server -c-1 ausgeben.

Daraufhin wird ein Node.js-httpd erstellt, der die Dateien in Ihrem Verzeichnis als statische Dateien bereitstellt, auf die über http://localhost:8080 zugegriffen werden kann.

Rubin

Wenn Ihre bevorzugte Sprache Ruby ist ... sagen die Ruby Gods, dass dies auch funktioniert:

Ruby -run -e httpd . -p 8080

PHP

Natürlich hat PHP auch eine Lösung.

php -S localhost:8000

In Chrome können Sie dieses Flag verwenden:

--allow-file-access-from-files

Lesen Sie hier mehr.

Habe heute zu diesem Thema beigetragen.

Ich habe einen Code geschrieben, der so aussah:

app.controller('ctrlr', function($scope, $http){
    $http.get('localhost:3000').success(function(data) {
        $scope.stuff = data;
    });
});

... aber es hätte so aussehen sollen:

app.controller('ctrlr', function($scope, $http){
    $http.get('http://localhost:3000').success(function(data) {
        $scope.stuff = data;
    });
});

Der einzige Unterschied war das Fehlen von http:// im zweiten Code-Snippet.

Ich wollte das einfach nur dort veröffentlichen, falls es andere mit einem ähnlichen Problem gibt.

Ändern Sie einfach die URL in http://localhost anstelle von localhost. Wenn Sie die html-Datei von local aus öffnen, sollten Sie einen lokalen Server erstellen, um diese html-Datei bereitzustellen. Die einfachste Methode ist die Verwendung von Web Server for Chrome . Das wird das Problem beheben.

In einer Android-App - beispielsweise, um JavaScript über file:///Android_asset/ Zugriff auf Assets zu gewähren - verwenden Sie setAllowFileAccessFromFileURLs(true) für die WebSettings, die Sie erhalten, wenn Sie getSettings() für die WebView aufrufen.

Für Windows ohne Python oder Node.js gibt es noch eine einfache Lösung: Mongoose.

Alles, was Sie tun, ist, die ausführbare Datei auf das Stammverzeichnis des Servers zu ziehen und auszuführen. In der Taskleiste wird ein Symbol angezeigt, das im Standardbrowser zum Server navigiert.

Z-WAMP ist ein zu 100% portables WAMP, das in einem einzigen Ordner ausgeführt wird. Es ist großartig. Dies ist eine Option, wenn Sie einen schnellen PHP und einen MySQL-Server benötigen.

Wenn Sie Mozilla Firefox verwenden, funktioniert es wie erwartet ohne Probleme. 

P.S. Selbst IE_Edge funktioniert überraschend gut !!

Ich werde 3 verschiedene Ansätze auflisten, um dieses Problem zu lösen: 

1. Verwenden eines sehr einfachen npm-Pakets: Installieren Sie live-server mithilfe von npm install -g live-server. Gehen Sie dann in dieses Verzeichnis, öffnen Sie das Terminal und geben Sie live-server ein und drücken Sie die Eingabetaste. Die Seite wird unter localhost:8080 angezeigt. BONUS: Standardmäßig wird auch Hot-Reloading unterstützt.
2. Verwenden eines einfachen Google Chrome App von Google entwickelt: Installieren Sie die App, öffnen Sie die Registerkarte "Apps" in Chrome und öffnen Sie die App. In der App zeigen Sie auf den richtigen Ordner. Ihre Seite wird geliefert!
3. Chrome-Verknüpfung in Windows ändern: Erstellen Sie eine Chrome-Browser-Verknüpfung. Klicken Sie mit der rechten Maustaste auf das Symbol und öffnen Sie die Eigenschaften. Bearbeiten Sie in den Eigenschaften target in "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:/ChromeDevSession" und speichern Sie. Öffnen Sie dann mit Chrome die Seite mit ctrl+o. HINWEIS: Verwenden Sie NICHT diese Verknüpfung für das normale Browsen.

Verwenden Sie http:// oder https://, um eine URL zu erstellen 

error: localhost:8080

solution: http://localhost:8080

der schnellste Weg für mich war: Für Windows-Benutzer führen Sie Ihre Datei auf Firefox Problem gelöst oder Wenn Sie Chrome am einfachsten verwenden möchten, war die Installation von Python 3. Anschließend können Sie über den Befehl Eingabeaufforderung den Befehl python -m http.server ausführen und dann nach http: // localhost: 8000/ navigieren und dann zu Ihren Dateien navigieren

python -m http.server

Beim Laden einer HTML-Datei in den Browser, der eine Json-Datei aus dem lokalen Verzeichnis verwendet, wurde diese Fehlermeldung angezeigt. In meinem Fall konnte ich dieses Problem lösen, indem ich einen einfachen Knotenserver erstellte, der statische Inhalte zulässt. Den Code dazu habe ich bei dieser anderen Antwort hinterlassen.

Ich schlage vor, Sie verwenden einen Mini-Server, um diese Art von Anwendungen auf localhost auszuführen (wenn Sie keinen eingebauten Server verwenden).

Das ist sehr einfach einzurichten und auszuführen:

https://www.npmjs.com/package/tiny-server

Es besagt lediglich, dass die Anwendung auf einem Webserver ausgeführt werden sollte. Ich hatte das gleiche Problem mit Chrome, ich habe Tomcat gestartet und meine Anwendung dorthin verschoben.

Ich vermute, dass es in einigen Antworten bereits erwähnt wurde, aber ich werde diese leicht modifizieren, um eine vollständige Antwort zu erhalten (einfacher zu finden und zu verwenden).

1. Gehen Sie zu: https://nodejs.org/de/download/ . Installieren Sie nodejs.

2. Installieren Sie den http-Server, indem Sie den Befehl über die Eingabeaufforderung npm install -g http-server ausführen.

3. Wechseln Sie in Ihr Arbeitsverzeichnis, in dem sich index.html/yoursome.html befindet.

4. Starten Sie Ihren http-Server, indem Sie den Befehl http-server -c-1 ausführen.

Öffnen Sie den Webbrowser unter http://localhost:8080 Oder http://localhost:8080/yoursome.html - abhängig von Ihrem HTML-Dateinamen.

Ich konnte diese Fehlermeldung auch erneut erstellen, wenn Sie einen Anchor-Tag mit der folgenden href verwenden: 

<a href="javascript:">Example a tag</a>

In meinem Fall wurde ein Tag verwendet, um den 'Pointer Cursor' abzurufen, und das Ereignis wurde tatsächlich durch ein jQuery-Ereignis beim Klicken gesteuert. Ich habe die href entfernt und eine Klasse hinzugefügt, die gilt:

cursor:pointer;

Für alle, die MacOS... haben, erstellen Sie einfach LaunchAgent, um diese glamourösen Funktionen in Ihrer eigenen Kopie von Chrome zu aktivieren. .

Speichern Sie ein plist mit dem Namen whatever (launch.chrome.dev.mode.plist, zum Beispiel) in ~/Library/LaunchAgents mit ähnlichem Inhalt wie ...

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.Apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>Label</key>
    <string>launch.chrome.dev.mode</string>
    <key>ProgramArguments</key>
    <array>
        <string>/Applications/Google Chrome.app/Contents/MacOS/Google Chrome</string>
        <string>-allow-file-access-from-files</string>
    </array>
    <key>RunAtLoad</key>
    <true/>
</dict>
</plist>

Es wird sollte beim Start gestartet. Sie können dies jedoch jederzeit mit dem Terminalbefehl erzwingen

launchctl load -w ~/Library/LaunchAgents/launch.chrome.dev.mode.plist

TADA! ???? ???????? ???? ????????

Das Laden statischer lokaler Dateien (zB: svg) ohne Server ist nicht möglich. Wenn auf Ihrem Computer NPM/YARN installiert ist, können Sie einen einfachen http-Server mit " http-server " einrichten. 

npm install http-server -g
http-server [path] [options]

Oder öffnen Sie das Terminal in diesem Projektordner und geben Sie "hs" ein. Der HTTP-Live-Server wird automatisch gestartet.

äh. Ich habe gerade ein paar offizielle Wörter gefunden. "Beim Versuch, ungebaute, entfernte AMD-Module, die das Dojo/Text-Plugin verwenden, zu laden, schlagen die Cross-Origin-Sicherheitsbeschränkungen fehl. (Die eingebauten Versionen von AMD-Modulen sind davon nicht betroffen, da die Aufrufe von Dojo/Text durch deaktiviert werden das Build-System.) " https://dojotoolkit.org/documentation/tutorials/1.10/cdn/

• Installieren Sie einen lokalen Webserver für Java, z. B. Tomcat, für PHP können Sie Lampen usw. verwenden
• Legen Sie die Json-Datei im öffentlich zugänglichen App-Server-Verzeichnis ab

•  

• Starten Sie den App-Server, und Sie sollten über localhost auf die Datei zugreifen können

Eine Möglichkeit, lokale Dateien zu laden, besteht darin, sie im Projektordner und nicht außerhalb des Projektordners zu verwenden. Erstellen Sie unter Ihren Projektbeispieldateien einen Ordner, der dem von uns erstellten Beispiel ähnlich ist, und ersetzen Sie den Abschnitt, in dem vollständiger lokaler Pfad als Projektpfad verwendet wird, und verwenden Sie die relative URL der Datei unter Projektordner ..__