La croix-origine du chargement de l'image refusée avec three.js dans chrome

Essayer d'ajouter de la matière dans THREE.js comme ce

var materialWall = new materialClass( { color: 0xffffff, map: THREE.ImageUtils.loadTexture( 'images/a.png' ) } );

Il fonctionne très bien sur Chrome, IE, FF, jusqu'à 3 jours, après Chrome mis à jour pour la dernière dev de la version 17.

Chrome 17 juste ne charge pas l'image et qui se plaint de l'suivantes

Cross-origin image load denied by Cross-Origin Resource Sharing policy.

C'est fou, car l'image est clairement dans le même domaine, alors est-ce un problème de chrome ou THREE.js ou quelque chose d'autre?

InformationsquelleAutor Nami WANG | 2011-11-05
  1. 12

    https://github.com/mrdoob/three.js/issues/687 se réfère à une question sur three.js' GitHub, qui a une bonne liste de solutions, y compris un lien vers une page wiki décrivant comment l'exécuter localement. Il existe aussi d'autres solutions de contournement dans le fil, y compris l'ajout de ce qui suit dans vos scripts:

    THREE.ImageUtils.crossOrigin = "";

    Ou, en ajoutant de la SCRO en-têtes, de sorte qu'ils sont spécifiquement autorisées.

    Notez que la plupart de ces informations ont été ajoutés à partir de l'existant lien à la question, à laquelle l'auteur original de cette réponse ne comprennent pas.

    • J'ai toujours cette question aujourd'hui - savez-vous si cela a été corrigé ou .. ? Je suis à jour... Tout le travail autour??
    • Le meilleur moyen pour résoudre ce problème aujourd'hui, plus d'un an plus tard?
    • S'il vous plaît ne laissez pas votre réponse sera rien, mais un lien. Inclure les détails de votre réponse, de sorte que si le lien meurt (par exemple, si le projet est déplacé vers un autre compte [et que vous oubliez de modifier ce lien], ou de nom, ou ce problème particulier est supprimé, ou GitHub de modifier leur convention de nommage, ou...) votre réponse a encore une certaine valeur.
    • Malheureusement cet utilisateur a été vu pour la Dernière fois le 20 Novembre '11 à 14:08...
    InformationsquelleAutor Mr.doob
  2. 13

    Si vous exécutez google Chrome à partir de localhost et à l'aide de Three.js, vous avez probablement besoin de courir Chrome avec cette option de ligne de commande:

    c://... /chrome.exe --allow-file-access-from-files
    • ok, mais les utilisateurs ne seront pas en cours d'exécution de la commande.. ça ne ressemble pas à une solution viable pour moi
    • comment appliquer cela dans ubuntu?
    • pour Mac: /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-l'accès de fichier de fichiers
    InformationsquelleAutor Orbiting Eden
  3. 7

    Si vous:

    • ne voulez pas configurer votre propre serveur, et
    • ne veux pas downgrade de sécurité de votre navigateur

    puis j'ai travaillé sur un moyen de contourner ce qui implique seulement un peu d'effort:

    1. Convertir l'image en Base64 texte
    2. De le stocker dans un fichier Javascript externe
    3. Un lien vers votre page de projet
    4. Le charger dans votre texture

    Tous les détails peuvent être trouvés à http://tp69.wordpress.com/2013/06/17/cors-bypass/ pour ceux qui sont intéressés.

    InformationsquelleAutor Tim
  4. 2

    Vous pouvez également exécuter un simple serveur HTTP à l'aide de python en exécutant la commande suivante à partir de la racine de votre dossier.

    python -m SimpleHTTPServer 8000
    InformationsquelleAutor Santosh
  5. 1

    1) Chrome raccourci -> Propriétés -> onglet Raccourci -> cible et
    ajouter --allow-file-access-de-fichiers dans la cible au dernier. (tuer tous les chrome tâches avant de faire cela.

    OU

    2) Télécharger Mangouste serveur web logiciel. Mettre dans votre répertoire de travail, et
    l'exécuter. Il s'ouvrira dans le navigateur http://localhost:PORT où il sera au service de tous vos fichiers.

    OU

    3) Vous pouvez également utiliser serveur NodeJS dans votre application.

    InformationsquelleAutor Swapnil Hadge
  6. 0

    cela a fonctionné pour moi sur la ligne de commande\terminal:

    ./chrome.exe --disable-web-security

    *notez que vous devez fermer toutes les instances de chrome avant l'exécution de la commande pour que cela fonctionne.

    InformationsquelleAutor Ice101781
  7. 0

    Solution idéale pour:

    THREE.js: Croix-origine du chargement de l'image refusé

    Juste ajouter timestamp à l'url de l'image. Je ne sais pas la logique derrière tout cela, mais il fonctionne.

    Exemple:

    var material = new THREE.MeshBasicMaterial({
  map: loader.load(url + "?v=" + (new Date()).toString(), function() {
    animate();
  })
});
    • cela ne fonctionne pas et je ne suis pas sûr de comment prévenir les CORS d'erreur. La seule chose qui empêche l'est de la mise en cache. Aussi, vous seriez mieux avec (new Date()).getTime() plutôt que "toString()"
    InformationsquelleAutor RAFI SHAIK