Wie behebt man den Fehler „Cross-Origin-Anfragen werden nur für HTTP unterstützt' beim Laden lokaler Dateien mit Three.js?

Lokale Dateien mit Three.js laden: Fehlerbehebung bei Cross-Origin-Anfragen

Beim Versuch, ein lokales 3D-Modell mit JSONLoader in Three.js zu laden , möglicherweise die Meldung „Cross-Origin-Anfragen werden nur für HTTP unterstützt.“ Fehler. Dieser Fehler entsteht aufgrund des unterschiedlichen Protokolls zwischen Ihrer lokalen Datei und dem Webbrowser.

Ursache des Fehlers

Dieser Fehler tritt auf, weil Browser ursprungsübergreifende Anforderungen einschränken standardmäßig. Sie verhindern aus Sicherheitsgründen, dass Websites auf Ressourcen unterschiedlicher Herkunft zugreifen. Wenn Sie eine lokale Datei von Ihrem Computer laden, geht der Browser davon aus, dass sie einen anderen Ursprung hat als Ihre Website, die normalerweise über HTTP bereitgestellt wird.

Fehlerbehebung

Um diesen Fehler zu beheben, haben Sie zwei Möglichkeiten:

1. Installieren Sie ein Local Webserver:

   • Installieren Sie einen Webserver auf Ihrem lokalen Computer, z. B. XAMPP oder Apache, und hosten Sie Ihr 3D-Modell auf dem Server.
   • Ändern Sie die URL des JSONLoaders in den Pfad des Modells auf Ihrem Webserver.

2. Hochladen das Modell aus der Ferne:

   • Laden Sie Ihr 3D-Modell auf einen Remote-Server wie GitHub, AWS S3 oder einen kostenlosen Hosting-Service hoch.
   • Aktualisieren Sie die URL des JSONLoader zur Remote-URL.

Verständnis Ursprünge

Ursprünge werden als Kombinationen aus Schema, Host und Port definiert. In diesem Fall unterscheiden sich Schema (HTTP/Datei), Host (localhost) und Port (typischerweise 80). Wie in RFC-6454 angegeben: „...sie haben das gleiche Schema, den gleichen Host und den gleichen Port.“ Daher führt das unterschiedliche Schema zu einem anderen Ursprung, auch wenn die Datei vom selben Host stammt.

Wenn Sie diese Lösungen befolgen, können Sie lokale 3D-Modelle erfolgreich in Three.js laden und die „Cross-Ursprungs-Anfragen“ vermeiden werden nur für HTTP unterstützt.“ Fehler.

Das obige ist der detaillierte Inhalt vonWie behebt man den Fehler „Cross-Origin-Anfragen werden nur für HTTP unterstützt' beim Laden lokaler Dateien mit Three.js?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!