it-swarm.com.de

Cross-Origin-Image-Last mit drei.js in Chrom verweigert

Beim Versuch, Material in THREE.js so hinzuzufügen

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

Es funktioniert einwandfrei in Chrome, IE, FF, bis vor 3 Tagen, nachdem sich Chrome auf die neueste Dev-Version 17 aktualisiert hat.

Chrome 17 lädt das Bild einfach nicht und beschwert sich über Folgendes

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

Das ist wahnsinnig, da das Image eindeutig in derselben Domäne liegt. Ist dies eine Ausgabe von Chrome oder THREE.js oder etwas anderes?

20
Nami WANG

https://github.com/mrdoob/three.js/issues/687 verweist auf ein Problem in GitHub von three.js, das eine gute Liste von Problemumgehungen enthält, einschließlich einen Link zu einer Wiki-Seite, in der beschrieben wird lokal ausführen . Es gibt auch einige andere Problemumgehungen im Thread, darunter das Hinzufügen der folgenden Skripts:

THREE.ImageUtils.crossOrigin = "";

Oder fügen Sie CORS-Header hinzu, damit sie ausdrücklich zulässig sind. 

Beachten Sie, dass die meisten dieser Informationen aus dem bereits vorhandenen Link zu dem Problem hinzugefügt wurden, das der ursprüngliche Autor dieser Antwort nicht enthielt.

12
Mr.doob

Wenn Sie Chrome über localhost ausführen und Three.js verwenden, müssen Sie Chrome möglicherweise mit dem folgenden Befehlszeilenflag ausführen:

c:// ... /chrome.exe --allow-file-access-from-files
13
Orbiting Eden

Wenn du:

  • ich möchte keinen eigenen Server einrichten und
  • ich möchte nicht die Sicherheit Ihres Browsers herabstufen

dann habe ich einen Weg gefunden, um das zu erreichen, was nur ein wenig Mühe erfordert:

  1. Konvertieren Sie das Bild in Base64-Text
  2. Speichern Sie es in einer externen Javascript-Datei
  3. Verknüpfen Sie es mit Ihrer Projektseite
  4. Lade es in deine Textur

Vollständige Details finden Sie unter http://tp69.wordpress.com/2013/06/17/cors-bypass/ für Interessierte.

7
Tim

Sie können auch einen einfachen HTTP-Server mit Python ausführen, indem Sie den folgenden Befehl in Ihrem Stammordner ausführen.

python -m SimpleHTTPServer 8000
2
Santosh

1) Chrome-Verknüpfung -> Eigenschaften -> Registerkarte "Verknüpfung" -> Ziel und füge endlich --allow-file-access-from-files in target hinzu. (Beenden Sie alle Chrome-Aufgaben, bevor Sie dies tun.)

ODER

2) Laden Sie die Software Mongoose Webserver herunter. Legen Sie es in Ihr Arbeitsverzeichnis und starte es. Es öffnet sich im Browser http: // localhost: PORT , wo alle Ihre Dateien gespeichert werden.

ODER

3) Sie können auch NodeJS Server in Ihrer Anwendung verwenden.

1
Swapnil Hadge

Perfekte Lösung für:

THREE.js: Das Laden des Ursprungsbildes wurde verweigert 

Fügen Sie einfach timestamp zur Bild-URL hinzu. Ich kenne die Logik dahinter nicht, aber es funktioniert.

Beispiel:

var material = new THREE.MeshBasicMaterial({
  map: loader.load(url + "?v=" + (new Date()).toString(), function() {
    animate();
  })
});
0
RAFI SHAIK

das hat für mich an der Kommandozeile\terminal funktioniert:

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

* Beachten Sie, dass Sie alle Instanzen von Chrome schließen müssen, bevor Sie den Befehl ausführen, damit er ausgeführt werden kann.

0
Ice101781