"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

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

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

Anmerkung: Verwenden Sie http:// como http://localhost:8080 für den Fall, dass Sie einen Fehler entdecken.

Answer 2

Verwenden Sie http:// o https:// zum Erstellen einer Url

Fehler : localhost:8080

Lösung : http://localhost:8080

Answer 3

In einer Android-App - zum Beispiel, um JavaScript den Zugriff auf Assets über file:///android_asset/ - Verwendung setAllowFileAccessFromFileURLs(true) über die WebSettings die Sie durch einen Anruf erhalten getSettings() über die WebView .

Answer 4

Der schnellste Weg war für mich: für Windows-Benutzer führen Sie Ihre Datei auf Firefox aus Problem gelöst, oder wenn Sie Chrome verwenden wollen, war es für mich am einfachsten, Python 3 zu installieren und dann von der Eingabeaufforderung aus den Befehl python -m http.server dann gehen Sie zu http://localhost:8000/ navigieren Sie dann zu Ihren Dateien

python -m http.server

Answer 5

Einfache Lösung für wen mit VS Code

Ich erhalte diese Fehlermeldung schon seit einiger Zeit. Die meisten Antworten funktionieren. Aber ich habe eine andere Lösung gefunden. Wenn Sie sich nicht mit node.js oder eine andere Lösung hier und Sie arbeiten mit einer HTML-Datei (Aufruf von Funktionen aus einer anderen js-Datei oder fetch json api's) versuchen Sie zu verwenden Live-Server Erweiterung.

Damit können Sie problemlos einen Live-Server eröffnen. Und weil es schafft localhost Server, das Problem ist gelöst. Sie können einfach den localhost indem Sie eine HTML-Datei öffnen, mit der rechten Maustaste auf den Editor klicken und dann auf Open with Live Server .

Es lädt die Dateien grundsätzlich mit http://localhost/index.html statt mit file://... .

EDIT

Es ist nicht notwendig, eine .html Datei. Sie können den Live Server mit Verknüpfungen starten.

Hit (alt+L, alt+O) um den Server zu öffnen und (alt+L, alt+C) um den Server anzuhalten. [Auf MAC, cmd+L, cmd+O et cmd+L, cmd+C ]

Ich hoffe, es hilft jemandem :)