Comment corriger les erreurs « Les requêtes d'origine croisée ne sont prises en charge que pour HTTP » lors du chargement de fichiers locaux avec Three.js ?

Chargement de fichiers locaux avec Three.js : dépannage des demandes d'origine croisée

Lors de la tentative de chargement d'un modèle 3D local dans Three.js à l'aide de JSONLoader , vous pouvez rencontrer le message « Les requêtes d'origine croisée ne sont prises en charge que pour HTTP. » erreur. Cette erreur est due à la différence de protocole entre votre fichier local et le navigateur Web.

Cause de l'erreur

Cette erreur se produit car les navigateurs restreignent les requêtes d'origine croisée. par défaut. Ils empêchent les sites Web d’accéder à des ressources d’origines différentes pour des raisons de sécurité. Lors du chargement d'un fichier local depuis votre ordinateur, le navigateur considère qu'il a une origine différente de celle de votre site Web, qui est généralement servi via HTTP.

Correction de l'erreur

Pour résoudre cette erreur, vous avez deux options :

1. Installer un local Serveur Web :

   • Installez un serveur Web sur votre ordinateur local, tel que XAMPP ou Apache, et hébergez votre modèle 3D sur le serveur.
   • Modifiez l'URL du JSONLoader en le chemin du modèle sur votre serveur web.

2. Téléchargez le Modéliser à distance :

   • Téléchargez votre modèle 3D sur un serveur distant, tel que GitHub, AWS S3 ou un service d'hébergement gratuit.
   • Mettez à jour l'URL du JSONLoader vers l'URL distante.

Compréhension Origines

Les origines sont définies comme des combinaisons de schéma, d'hôte et de port. Dans ce cas, le schéma (HTTP/fichier), l'hôte (localhost) et le port (généralement 80) diffèrent. Comme indiqué dans la RFC-6454 : "...ils ont le même schéma, le même hôte et le même port." Par conséquent, même si le fichier provient du même hôte, le schéma différent entraîne une origine différente.

En suivant ces solutions, vous pouvez charger avec succès des modèles 3D locaux dans Three.js et éviter les « requêtes d'origine croisées » ne sont pris en charge que pour HTTP." erreur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!