"Ursprungsübergreifende Anforderungen werden nur für HTTP unterstützt." Fehler beim Laden einer lokalen Datei

796

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.

Corazza
quelle
23
Versuchen Sie dies lokal zu tun?
WojtekT
11
Sie müssen localhost verwenden, auch wenn seine lokale Datei
Neil
22
Aber es ist nicht domänenübergreifend!
Corazza
21
Wenn Sie Chrome verwenden, kann es hilfreich sein, es vom Terminal aus mit der Option --allow-file-access-from-files zu starten.
Nickiaconis
12
Ja, es ist nicht wirklich domänenübergreifend, wenn sich die Datei im selben Ordner wie die Webseite befindet. Jetzt ist es so ... Ich habe festgestellt, dass das Problem behoben ist, wenn Sie Firefox anstelle von Chrome verwenden.
Sphinxxx

Antworten:

790

Meine Kristallkugel sagt, dass Sie das Modell mit entweder file://oder laden C:/, 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 jsonpund die URL verwenden und in ändernhttp://example.com/path/to/model

Origin ist in RFC-6454 als definiert

   ...they have the same
   scheme, host, and port.  (See Section 4 for full details.)

Obwohl Ihre Datei vom selben Host stammt ( localhost), aber solange das Schema unterschiedlich ist ( http/ file), werden sie als unterschiedlicher Ursprung behandelt.

Andreas Wong
quelle
7
Ja, ich versuche dies mit file://, aber ich verstehe nicht, warum dies erlaubt ist. Nun, ich installiere Lampp, denke ich ...
Corazza
150
Stellen Sie sich vor, ob dies erlaubt ist und eine Webanwendung, bei der der Autor der Seite so etwas verwendet load('file://C:/users/user/supersecret.doc')und dann den Inhalt mit Ajax usw. auf seinen Server hochlädt.
Andreas Wong
11
Leider ist die Politik für alle Fälle gemacht, nicht nur für Ihre :(, also müssen Sie es ertragen
Andreas Wong
28
Es gibt eine Seite für dieses Thema im GitHub-Wiki: github.com/mrdoob/three.js/wiki/How-to-run-things-locally
Felipe Lima
29
Sie können auch den Schalter --allow-file-access-from-files in Chrome verwenden. Laut
prauchfuss
609

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

  1. Wechseln Sie some.htmlmit dem Befehl in den Ordner, in dem Ihre Datei oder Datei (en) vorhanden sindcd /path/to/your/folder

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

  1. Sie können einen benutzerdefinierten Port verwenden 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 ...

  1. Installieren Sie http-serverdurch Eingabenpm install -g http-server

  2. Wechseln Sie in Ihr Arbeitsverzeichnis, in dem Sie some.htmlleben

  3. Starten 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:

ruby -run -e httpd . -p 8080

PHP

Natürlich hat PHP auch seine Lösung.

php -S localhost:8000
Scott Stensland
quelle
3
Das hat mir eine Menge Zeit gespart, danke. Meine Python-Installation hatte nicht das SimpleHTTPServer-Modul, aber die Knotenanweisungen funktionierten wie ein Zauber.
LukeP
3
Als Antwort auf den Kommentar von LukeP funktioniert der Befehl in Python 2.7 gemäß den Anweisungen $ 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 SimpleHttpServerSie die Fehlermeldung. No module named SimpleHttpServerWenn 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
möchten,
1
Der Python-Server stellt Dateien aus dem Verzeichnis bereit, in dem Sie den Server starten. Wenn also die Dateien , die Sie sich servieren wollen , in / Users / 7stud / angular_projects / 1app, starten Sie den Server in diesem Verzeichnis, zum Beispiel $ cd ~/angular_projects/1app, dann $ python -m SimpleHTTPServer. Geben Sie in Ihrem Browser die URL ein http://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
7stud
2
Ich habe gehört, dass Python einfach und mächtig ist, genau wie die "X" -Sprache, aber das ist lächerlich! Sie müssen weder XAMPP installieren noch einen einfachen http-Server mit Knoten einrichten, um statische Dateien bereitzustellen - Ein Befehl und ein Boom! Vielen Dank, spart viel Zeit und Ärger.
RD
2
GENIAL! - Für Python unter Windows verwenden Sie: python -m http.server 8080 ... oder einen beliebigen Port, und wenn Sie ihn beenden möchten, drücken Sie einfach Strg-C.
Kristopher
161

In Chrome können Sie dieses Flag verwenden:

--allow-file-access-from-files

Lesen Sie hier mehr.

Gemeinschaft
quelle
11
@ Blairg23, denken Sie daran, dass diese Lösung einen Neustart aller Instanzen von Chrome.exe erfordert, damit es funktioniert
Alex Klaus
3
Bitte erläutern Sie die Verwendung in Chrom.
Rishabh Agrahari
@Priya Sollte dies jedoch nicht tun
Suraj Jain
Ich würde empfehlen, Chromium nur für das lokale Debuggen zu verwenden (beginnend mit flag --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.
Alan Zhiliang Feng
Beachten Sie, dass fetch()dies ohnehin immer noch bestreitet. Sie müssen XMLHttpRequestin irgendeiner Weise verwenden
Hashbrown
63

Bin heute dazu gekommen.

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 des http://zweiten Codeausschnitts.

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

James Harrington
quelle
41

Ändern Sie einfach die URL in http://localhoststatt localhost. Wenn Sie die HTML-Datei von lokal öffnen, sollten Sie einen lokalen Server erstellen, um diese HTML-Datei bereitzustellen. Der einfachste Weg ist die Verwendung Web Server for Chrome. Das wird das Problem beheben.

Finn
quelle
5
+1 für Web Server for ChromeApp-Link - es ist bei weitem die einfachste und sauberste Lösung für die temporäre httpd-Einrichtung für Chrome IMO
Es hat mich gerettet. Die genaue Lösung
Surya
18

In einer Android-App - zum Beispiel, um JavaScript den Zugriff auf Assets über zu ermöglichen file:///android_asset/- verwenden Sie setAllowFileAccessFromFileURLs(true)die WebSettings, die Sie durch Aufrufen getSettings()der erhalten WebView.

CommonsWare
quelle
Brillant! Wir wollten gerade Methoden umschreiben, um JSON in Variablen einzufügen. Aber das funktioniert! webView.getSettings (). setAllowFileAccessFromFileURLs (true);
WallyHale
15

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

Fehler :localhost:8080

Lösung :http://localhost:8080

KARTHIKEYAN.A
quelle
14

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 Dateien

python -m http.server
Ridha Rezzag
quelle
13

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

  1. Verwenden eines sehr leichten npmPakets : Installieren Sie den Live-Server mit npm install -g live-server. Gehen Sie dann in dieses Verzeichnis, öffnen Sie das Terminal live-serverund geben Sie die Eingabetaste ein. Die Seite wird unter bedient localhost:8080. BONUS: Standardmäßig wird auch das Hot-Reloading unterstützt.
  2. Verwenden einer von Google entwickelten leichten Google Chrome- App : Installieren Sie die App, wechseln Sie in Chrome zur Registerkarte "Apps" und öffnen Sie die App. Zeigen Sie in der App auf den richtigen Ordner. Ihre Seite wird zugestellt!
  3. Ändern der Chrome-Verknüpfung in Windows : Erstellen Sie die Verknüpfung eines Chrome-Browsers. Klicken Sie mit der rechten Maustaste auf das Symbol und öffnen Sie die Eigenschaften. In Eigenschaften bearbeiten targetzu "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 mit ctrl+o. HINWEIS: Verwenden Sie diese Verknüpfung NICHT zum regulären Surfen.
BlackBeard
quelle
12

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.

Bryc
quelle
Wenn Sie PHP installieren oder installiert haben, können Sie einen Server in Ihrem Ordner starten
jechaviz
12

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

PS Überraschenderweise funktioniert IntenetExplorer_Edge absolut einwandfrei !!!

Yash P Shah
quelle
1
nicht länger. Firefox und dh blockieren beide Cors Anfrage für mich.
Baahubali
Auch das ist keine gute Sache, um auf
unsichere
6

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.jseiner 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 localhostServer erstellt , ist das Problem behoben. Sie können das einfach starten, localhostindem Sie eine HTML-Datei öffnen und mit der rechten Maustaste auf den Editor klicken und auf klicken Open with Live Server.

Grundsätzlich werden die Dateien mit http://localhost/index.htmlanstatt mit geladen file://....

BEARBEITEN

Es ist nicht erforderlich, eine .htmlDatei zu haben . Sie können den Live Server mit Verknüpfungen starten.

Drücken Sie, (alt+L, alt+O)um den Server zu öffnen und den Server (alt+L, alt+C)zu stoppen. [Auf MAC cmd+L, cmd+Ound cmd+L, cmd+C]

Hoffe es wird jemandem helfen :)

Ömürcan Cengiz
quelle
4

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 .

thehme
quelle
4

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:

https://www.npmjs.com/package/tiny-server
Deniss M.
quelle
4

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

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

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

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

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

Öffnen Sie den Webbrowser für http://localhost:8080 oder http://localhost:8080/yoursome.html - abhängig von Ihrem HTML-Dateinamen.

TarmoPikaro
quelle
3

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.

Enayat
quelle
1

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

YUIOP QWERT
quelle
1

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

Naga Sai A.
quelle
1

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.plistzum Beispiel) ~/Library/LaunchAgentsmit ä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 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! 😎 💁🏻 🙊 🙏🏾

Alex Gray
quelle
1
  • Installieren Sie einen lokalen Webserver für Java, z. B. Tomcat. Für PHP können Sie eine Lampe usw. Verwenden
  • Legen Sie die JSON-Datei im öffentlich zugänglichen App Server-Verzeichnis ab
  • Listenpunkt

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

Fred Ondieki
quelle
1

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.

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.

Sujith S.
quelle
doppelte Antwort
Scott Stensland
0

Ich konnte diese Fehlermeldung auch neu erstellen, wenn ich ein Ankertag mit der folgenden href verwendete:

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

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:

cursor:pointer;

mgilberties
quelle
0

Für Linux Python-Benutzer:

import webbrowser
browser = webbrowser.get('google-chrome --allow-file-access-from-files %s')
browser.open(url)
Daniel Braun
quelle
Gibt es keinen Grund, warum google-chrome --allow-file-access-from-files <url>man nicht arbeiten und prägnanter sein sollte?
agupta231
@ agupta231 Das Webbrowser-Modul verfügt über Argumente, die Ihnen verschiedene Arten des "Öffnens" ermöglichen, z. Öffnen in aktuellem Tab, neuem Tab, neuem Fenster etc.
Daniel Braun
0

Wenn Sie darauf bestehen, die .htmlDatei 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, .jsDateien bereitzustellen file://. Meine Lösung bestand darin, mein Build-Skript zu aktualisieren, um <script src="...">Tags durch zu ersetzen <script>...</script>. Hier ist ein gulpAnsatz dafür:

1. Führen Sie npm install --save-devPakete aus gulp, gulp-inlineund del.

2. Fügen Sie gulpfile.jsnach dem Erstellen eines Verzeichnisses im Stammverzeichnis den folgenden Code hinzu (ändern Sie einfach die Dateipfade für das, was zu Ihnen passt):

let gulp = require('gulp');
let inline = require('gulp-inline');
let del = require('del');

gulp.task('inline', function (done) {
    gulp.src('dist/index.html')
    .pipe(inline({
        base: 'dist/',
        disabledTypes: 'css, svg, img'
    }))
    .pipe(gulp.dest('dist/').on('finish', function(){
        done()
    }));
});

gulp.task('clean', function (done) {
    del(['dist/*.js'])
    done()
});

gulp.task('bundle-for-local', gulp.series('inline', 'clean'))
  1. Führen Sie gulp bundle-for-localIhr 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 .

noamyg
quelle
-1

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.

user1462586
quelle
-1

Ich habe dies erlebt, als ich eine Seite für die Offline-Ansicht heruntergeladen habe.

Ich musste nur die entfernen integrity="*****" und crossorigin="anonymous"Attribute von allen <link>und <script>Tags

Aphoe
quelle