Ich versuche, ein 3D-Modell mit in Three.js zu laden JSONLoader
, 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 und wie ich ihn beheben kann.
Antworten:
Meine Kristallkugel sagt, dass Sie das Modell mit entweder
file://
oder ladenC:/
, was der Fehlermeldung treu bleibt, da dies nicht der Fall isthttp://
Sie können also entweder einen Webserver auf Ihrem lokalen PC installieren oder das Modell an eine andere Stelle hochladen
jsonp
und die URL verwenden und in ändernhttp://example.com/path/to/model
Origin ist in RFC-6454 als definiert
Obwohl Ihre Datei vom selben Host stammt (
localhost
), aber solange das Schema unterschiedlich ist (http
/file
), werden sie als unterschiedlicher Ursprung behandelt.quelle
file://
, aber ich verstehe nicht, warum dies erlaubt ist. Nun, ich installiere Lampp, denke ich ...load('file://C:/users/user/supersecret.doc')
und dann den Inhalt mit Ajax usw. auf seinen Server hochlädt.Nur um explizit zu sein - Ja, der Fehler besagt, dass Sie Ihren Browser nicht direkt darauf richten können
file://some/path/some.html
Hier sind einige Optionen, mit denen Sie schnell einen lokalen Webserver starten können, damit Ihr Browser lokale Dateien rendern kann
Python 2
Wenn Sie Python installiert haben ...
Wechseln Sie
some.html
mit dem Befehl in den Ordner, in dem Ihre Datei oder Datei (en) vorhanden sindcd /path/to/your/folder
Starten Sie einen Python-Webserver mit dem Befehl
python -m SimpleHTTPServer
Dadurch wird ein Webserver gestartet, auf dem Ihre gesamte Verzeichnisliste gehostet wird
http://localhost:8000
python -m SimpleHTTPServer 9000
, über den Sie einen Link erhalten: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 reaktionsschnelleres Setup benötigen und bereits nodejs verwenden ...
Installieren Sie
http-server
durch Eingabenpm install -g http-server
Wechseln Sie in Ihr Arbeitsverzeichnis, in dem Sie
some.html
lebenStarten Sie Ihren http-Server durch Ausgabe
http-server -c-1
Dadurch wird eine Node.js-httpd gestartet, die die Dateien in Ihrem Verzeichnis als statische Dateien bereitstellt, auf die über sie zugegriffen werden kann
http://localhost:8080
Rubin
Wenn Ihre bevorzugte Sprache Ruby ist ... sagen die Ruby-Götter, dass dies auch funktioniert:
PHP
Natürlich hat PHP auch seine Lösung.
quelle
$ python -m SimpleHTTPServer
, die die folgende Meldung erzeugen:Serving HTTP on 0.0.0.0 port 8000 ...
Wenn Sie den Modulnamen falsch buchstabieren, z. B. erhalten$ python -m SimpleHttpServer
Sie die Fehlermeldung.No module named SimpleHttpServer
Wenn Sie Python3 haben, wird eine ähnliche Fehlermeldung angezeigt installiert (v. Python 2.7). Sie können Ihre Python-Version mit dem folgenden Befehl überprüfen :$ python --version
. Sie können den Port, den Sie abhören$ python -m SimpleHTTPServer 3333
$ cd ~/angular_projects/1app
, dann$ python -m SimpleHTTPServer
. Geben Sie in Ihrem Browser die URL einhttp://localhost:8000/index.html
. Sie können auch Dateien in Unterverzeichnissen des Verzeichnisses anfordern, in dem Sie den Server gestartet haben, z. B.http://localhost:8000/subdir/hello.html
In Chrome können Sie dieses Flag verwenden:
Lesen Sie hier mehr.
quelle
--allow-file-access-from-files
). Dies bedeutet, dass Sie Chrome für das allgemeine Surfen im Internet verwenden und Chromium als Standardanwendung für HTML-Dateien verwenden.fetch()
dies ohnehin immer noch bestreitet. Sie müssenXMLHttpRequest
in irgendeiner Weise verwendenBin heute dazu gekommen.
Ich habe einen Code geschrieben, der so aussah:
... aber es hätte so aussehen sollen:
Der einzige Unterschied war das Fehlen des
http://
zweiten Codeausschnitts.Ich wollte das nur veröffentlichen, falls es andere mit einem ähnlichen Problem gibt.
quelle
Ändern Sie einfach die URL in
http://localhost
stattlocalhost
. Wenn Sie die HTML-Datei von lokal öffnen, sollten Sie einen lokalen Server erstellen, um diese HTML-Datei bereitzustellen. Der einfachste Weg ist die VerwendungWeb Server for Chrome
. Das wird das Problem beheben.quelle
Web Server for Chrome
App-Link - es ist bei weitem die einfachste und sauberste Lösung für die temporäre httpd-Einrichtung für Chrome IMOIn einer Android-App - zum Beispiel, um JavaScript den Zugriff auf Assets über zu ermöglichen
file:///android_asset/
- verwenden SiesetAllowFileAccessFromFileURLs(true)
dieWebSettings
, die Sie durch AufrufengetSettings()
der erhaltenWebView
.quelle
Verwenden Sie
http://
oderhttps://
, um eine URL zu erstellenFehler :
localhost:8080
Lösung :
http://localhost:8080
quelle
Der schnellste Weg für mich war: Für Windows-Benutzer, die Ihre Datei unter Firefox ausführen, ist das Problem gelöst. Wenn Sie Chrome verwenden möchten, war es für mich am einfachsten, Python 3 zu installieren und dann über die Eingabeaufforderung den Befehl auszuführen.
python -m http.server
Gehen Sie dann zu http: // localhost: 8000 / Navigieren Sie dann zu Ihren Dateienquelle
Ich werde 3 verschiedene Ansätze auflisten, um dieses Problem zu lösen:
npm
Pakets : Installieren Sie den Live-Server mitnpm install -g live-server
. Gehen Sie dann in dieses Verzeichnis, öffnen Sie das Terminallive-server
und geben Sie die Eingabetaste ein. Die Seite wird unter bedientlocalhost:8080
. BONUS: Standardmäßig wird auch das Hot-Reloading unterstützt.target
zu"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:/ChromeDevSession"
und speichert. Öffnen Sie dann mit Chrome die Seite mitctrl+o
. HINWEIS: Verwenden Sie diese Verknüpfung NICHT zum regulären Surfen.quelle
Für Windows-Benutzer ohne Python oder Node.js gibt es immer noch eine einfache Lösung: Mongoose .
Alles, was Sie tun, ist, die ausführbare Datei an die Stelle zu ziehen, an der sich das Stammverzeichnis des Servers befinden soll, und sie auszuführen. In der Taskleiste wird ein Symbol angezeigt, das im Standardbrowser zum Server navigiert.
Außerdem ist Z-WAMP eine 100% tragbare WAMP, die in einem einzigen Ordner ausgeführt wird. Es ist fantastisch. Dies ist eine Option, wenn Sie einen schnellen PHP- und MySQL-Server benötigen.
quelle
Wenn Sie Mozilla Firefox verwenden, funktioniert es wie erwartet ohne Probleme.
PS Überraschenderweise funktioniert IntenetExplorer_Edge absolut einwandfrei !!!
quelle
Einfache Lösung für wen mit VS Code
Ich habe diesen Fehler für eine Weile bekommen. Die meisten Antworten funktionieren. Aber ich habe eine andere Lösung gefunden. Wenn Sie sich hier nicht mit
node.js
einer anderen Lösung befassen möchten und mit einer HTML-Datei arbeiten (Funktionen aus einer anderen JS-Datei aufrufen oder JSON-APIs abrufen), versuchen Sie, die Live Server- Erweiterung zu verwenden.Sie können damit problemlos einen Live-Server öffnen. Und weil es
localhost
Server erstellt , ist das Problem behoben. Sie können das einfach starten,localhost
indem Sie eine HTML-Datei öffnen und mit der rechten Maustaste auf den Editor klicken und auf klickenOpen with Live Server
.Grundsätzlich werden die Dateien mit
http://localhost/index.html
anstatt mit geladenfile://...
.BEARBEITEN
Es ist nicht erforderlich, eine
.html
Datei zu haben . Sie können den Live Server mit Verknüpfungen starten.Hoffe es wird jemandem helfen :)
quelle
Ich habe genau diesen Fehler beim Laden einer HTML-Datei in den Browser erhalten, der eine JSON-Datei aus dem lokalen Verzeichnis verwendet. In meinem Fall konnte ich dieses Problem lösen, indem ich einen einfachen Knotenserver erstellte, der statische Inhalte bedienen konnte. Ich habe den Code dafür bei dieser anderen Antwort belassen .
quelle
Ich schlage vor, dass Sie einen Mini-Server verwenden, um diese Art von Anwendungen auf localhost auszuführen (wenn Sie keinen eingebauten Server verwenden).
Hier ist eine, die sehr einfach einzurichten und auszuführen ist:
quelle
Ich vermute, dass es bereits in einigen Antworten erwähnt wurde, aber ich werde dies leicht ändern, um eine vollständige funktionierende Antwort zu erhalten (einfacher zu finden und zu verwenden).
Gehen Sie zu: https://nodejs.org/en/download/ . Installieren Sie nodejs.
Installieren Sie den http-Server, indem Sie den Befehl an der Eingabeaufforderung ausführen
npm install -g http-server
.Wechseln Sie in Ihr Arbeitsverzeichnis, in dem sich
index.html
/yoursome.html
befindet.Starten Sie Ihren http-Server, indem Sie den Befehl ausführen
http-server -c-1
Öffnen Sie den Webbrowser für
http://localhost:8080
oderhttp://localhost:8080/yoursome.html
- abhängig von Ihrem HTML-Dateinamen.quelle
Es heißt einfach, dass die Anwendung auf einem Webserver ausgeführt werden soll. Ich hatte das gleiche Problem mit Chrome, ich habe Tomcat gestartet und meine Anwendung dorthin verschoben, und es hat funktioniert.
quelle
äh. Ich habe gerade einige offizielle Wörter gefunden: "Der Versuch, nicht erstellte Remote-AMD-Module zu laden, die das Dojo / Text-Plugin verwenden, schlägt aufgrund von Sicherheitsbeschränkungen zwischen verschiedenen Ursprüngen fehl. (Erstellte Versionen von AMD-Modulen bleiben davon unberührt, da die Aufrufe von Dojo / Text durch eliminiert werden." das Build-System.) " https://dojotoolkit.org/documentation/tutorials/1.10/cdn/
quelle
Eine Möglichkeit, lokale Dateien zu laden, besteht darin, sie im Projektordner anstatt außerhalb Ihres Projektordners zu verwenden. Erstellen Sie einen Ordner unter Ihren Projektbeispieldateien, ähnlich wie wir ihn für Bilder erstellen, und ersetzen Sie den Abschnitt, in dem der vollständige lokale Pfad außer dem Projektpfad verwendet wird, und verwenden Sie die relative URL der Datei im Projektordner. Es hat bei mir funktioniert
quelle
Für alle, die
MacOS
... einen einfachen LaunchAgent einrichten , um diese glamourösen Funktionen in Ihrer eigenen Kopie von Chrome zu aktivieren ...Speichern Sie ein
plist
, wie auch immer genanntes (launch.chrome.dev.mode.plist
zum Beispiel)~/Library/LaunchAgents
mit ähnlichem Inhalt wie ...Es sollte beim Start gestartet werden. Sie können dies jedoch jederzeit mit dem Befehl terminal erzwingen
launchctl load -w ~/Library/LaunchAgents/launch.chrome.dev.mode.plist
TADA! 😎 💁🏻 🙊 🙏🏾
quelle
Starten Sie den App-Server, und Sie sollten über localhost auf die Datei zugreifen können
quelle
Ohne Server können keine statischen lokalen Dateien (z. B. svg) geladen werden. Wenn Sie NPM / YARN auf Ihrem Computer installiert haben, können Sie einen einfachen http-Server mit " http-server " einrichten.
quelle
Viele Probleme hierfür, bei meinem Problem fehlt '/' Beispiel: jquery-1.10.2.js: 8720 XMLHttpRequest kann http: // localhost: xxxProduct / getList_tagLabels / nicht laden. Es muss sein: http: // localhost: xxx / Product / getList_tagLabels /
Ich hoffe diese Hilfe für diejenigen, die dieses Problem lösen.
quelle
Ich konnte diese Fehlermeldung auch neu erstellen, wenn ich ein Ankertag mit der folgenden href verwendete:
In meinem Fall wurde ein Tag verwendet, um den 'Zeigercursor' abzurufen, und das Ereignis wurde tatsächlich von einem jQuery-on-Click-Ereignis gesteuert. Ich habe die href entfernt und eine Klasse hinzugefügt, die gilt:
quelle
Für Linux Python-Benutzer:
quelle
google-chrome --allow-file-access-from-files <url>
man nicht arbeiten und prägnanter sein sollte?Wenn Sie darauf bestehen, die
.html
Datei lokal auszuführen und nicht mit einem Webserver bereitzustellen, können Sie verhindern, dass diese Cross-Origin-Anforderungen überhaupt auftreten, indem Sie die problematischen Ressourcen inline verfügbar machen.Ich hatte dieses Problem beim Versuch,
.js
Dateien bereitzustellenfile://
. Meine Lösung bestand darin, mein Build-Skript zu aktualisieren, um<script src="...">
Tags durch zu ersetzen<script>...</script>
. Hier ist eingulp
Ansatz dafür:1. Führen Sie
npm install --save-dev
Pakete ausgulp
,gulp-inline
unddel
.2. Fügen Sie
gulpfile.js
nach dem Erstellen eines Verzeichnisses im Stammverzeichnis den folgenden Code hinzu (ändern Sie einfach die Dateipfade für das, was zu Ihnen passt):gulp bundle-for-local
Ihr Build-Skript aus oder aktualisieren Sie es, um es automatisch auszuführen.Das detaillierte Problem und die Lösung für meinen Fall finden Sie hier .
quelle
Cordova erreichen dies. Ich kann immer noch nicht herausfinden, wie Cordova es gemacht hat. Es geht nicht einmal durch shouldInterceptRequest.
Später fand ich heraus, dass der Schlüssel zum Laden einer Datei aus der lokalen Datei lautet: myWebView.getSettings (). SetAllowUniversalAccessFromFileURLs (true);
Wenn Sie auf eine http-Ressource zugreifen möchten, überprüft die Webansicht die OPTIONS-Methode, mit der Sie den Zugriff über WebViewClient.shouldInterceptRequest gewähren können, indem Sie eine Antwort zurückgeben. Für die folgende GET / POST-Methode können Sie einfach null zurückgeben.
quelle
Schließen Sie zuerst alle Chrominstanzen.
danach folgen Sie diesem.
Ich habe diesen Befehl auf dem Mac verwendet.
"/ Applications / Google Chrome.app/Contents/MacOS/Google Chrome" - Erlaubt den Dateizugriff aus Dateien
Für Windows:
Wie starte ich HTML mit Chrome im Modus "--allow-file-access-from-files"?
quelle
Ich habe dies erlebt, als ich eine Seite für die Offline-Ansicht heruntergeladen habe.
Ich musste nur die entfernen
integrity="*****"
undcrossorigin="anonymous"
Attribute von allen<link>
und<script>
Tagsquelle