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

Question

Ich versuche, ein 3D-Modell, das lokal auf meinem Computer gespeichert ist, in Three.js zu laden mit JSONLoader und dieses 3D-Modell befindet sich im selben Verzeichnis wie die gesamte Website.

Ich bekomme die "Cross origin requests are only supported for HTTP." Fehler, aber ich weiß nicht, was die Ursache ist und wie man ihn beheben kann.

Answer 1

Meine Kristallkugel sagt, dass Sie das Modell entweder mit file:// o C:/ was der Fehlermeldung treu bleibt, da es sich nicht um http://

Sie können also entweder einen Webserver auf Ihrem lokalen PC installieren oder das Modell irgendwo anders hochladen und die jsonp und ändern Sie die Url in http://example.com/path/to/model

Der Ursprung ist definiert in RFC-6454 als

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

Auch wenn Ihre Datei vom selben Host stammt ( localhost ), aber solange das Schema anders ist ( http / file ), werden sie als unterschiedliche Herkunft behandelt.

Answer 2

Nur um das klarzustellen: Ja, der Fehler besagt, dass Sie Ihren Browser nicht direkt auf file://some/path/some.html

Hier sind einige Optionen, um schnell einen lokalen Webserver einzurichten, damit Ihr Browser lokale Dateien rendern kann

Python 2

Wenn Sie Python installiert haben...

1. Wechseln Sie in das Verzeichnis, in dem Ihre Datei some.html oder Datei(en) existieren 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, auf dem Ihr gesamtes Verzeichnisverzeichnis unter http://localhost:8000

3. Sie können einen benutzerdefinierten Anschluss verwenden python -m SimpleHTTPServer 9000 Sie geben Ihnen einen Link: http://localhost:9000

Dieser Ansatz ist in jede Python-Installation integriert.

Python 3

Führen Sie dieselben Schritte aus, verwenden Sie aber stattdessen den folgenden Befehl python3 -m http.server

VSCode

Wenn Sie Folgendes verwenden Visual Studio-Code können Sie die Live-Server Erweiterung, die eine lokale Webserver-Umgebung bereitstellt.

Node.js

Alternativ, wenn Sie ein reaktionsschnelleres Setup wünschen und bereits Nodejs verwenden...

1. Installieren Sie http-server durch Tippen npm install -g http-server

2. Wechseln Sie in Ihr Arbeitsverzeichnis, in dem Ihr some.html lebt

3. Starten Sie Ihren http-Server durch die Eingabe von http-server -c-1

Dadurch wird ein Node.js httpd gestartet, der die Dateien in Ihrem Verzeichnis als statische Dateien bereitstellt, die von http://localhost:8080

Rubinrot

Wenn Ihre bevorzugte Sprache Ruby ist ... die Ruby-Götter sagen, dass dies auch funktioniert:

ruby -run -e httpd . -p 8080

PHP

Natürlich hat auch PHP seine Lösung.

php -S localhost:8000

Answer 3

In Chrome können Sie dieses Flag verwenden:

--allow-file-access-from-files

Lesen Sie hier mehr.

Answer 4

Ich bin heute darauf gestoßen.

Ich habe einen Code geschrieben, der wie folgt aussieht:

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

Ich wollte das nur sagen, falls es andere mit einem ähnlichen Problem gibt.

Answer 5

Ändern Sie einfach die Url in http://localhost anstelle von localhost . Wenn Sie die Html-Datei lokal öffnen, sollten Sie einen lokalen Server erstellen, um die Html-Datei bereitzustellen; der einfachste Weg ist die Verwendung von Web Server for Chrome . Damit wird das Problem behoben.