it-swarm.com.de

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

Ich versuche, ein 3D-Modell mit JSONLoader in Three.js zu laden, und dieses 3D-Modell befindet sich im selben Verzeichnis wie die gesamte Website.

Ich erhalte den "Cross Origin requests are only supported for HTTP."-Fehler, weiß aber nicht, was ihn verursacht oder wie er behoben werden kann.

691
corazza

Meine Kristallkugel sagt, dass Sie das Modell entweder mit file:// oder C:/ laden, was der Fehlermeldung treu bleibt, da sie nicht http:// ist.

Sie können also entweder einen Webserver auf Ihrem lokalen PC installieren oder das Modell an einem anderen Ort hochladen und jsonp verwenden und die URL in http://example.com/path/to/model ändern.

709
Andreas Wong

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.

  1. 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
536
Scott Stensland

In Chrome können Sie dieses Flag verwenden:

--allow-file-access-from-files

Lesen Sie hier mehr.

150
user669677

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.

56

Ä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.

31
Finn

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.

12
CommonsWare

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.

10
bryc

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

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

8
Yash P Shah

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.
7
BlackBeard

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

error: localhost:8080

solution: http://localhost:8080

4
KARTHIKEYAN.A

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
3
Rida

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.

2
thehme

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
2
Deniss M.

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.

1
Enayat Rajabi

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.

1
TarmoPikaro

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;

0
mgilberties

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! ???? ???????? ???? ????????

0
Alex Gray

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.

0
sujithklr93

ä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/

0
YUIOP QWERT
  • 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
  •  List item

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

0
Fred Ondieki

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 ..__ 

0
Naga Sai A