web-dev-qa-db-ja.com

chromeのthree.jsでクロスオリジン画像の読み込みが拒否されました

このようにTHREE.jsに資料を追加しようとしています

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

Chrome自身が最新の開発バージョン17にアップデートされた後、3日前まではChrome、IE、FFで正常に動作します。

Chrome 17が画像を読み込まず、次の文句を言う

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

画像が明らかに同じドメインにあるので、それは正気ではありません。これはchromeまたはTHREE.jsなどの問題ですか？

javascriptgoogle-chromecross-domainthree.js
20
Nami WANG

https://github.com/mrdoob/three.js/issues/687 は、three.jsのGitHubの問題を参照しています。 ローカルで実行する方法を説明するWikiページへのリンク を含む回避策の一覧。スレッドには、スクリプトに以下を追加するなど、他のいくつかの回避策もあります。

THREE.ImageUtils.crossOrigin = "";

または、明確に許可されるようにCORSヘッダーを追加します。

この情報のほとんどは、既存のリンクから問題に追加されたものであることに注意してください。この回答の元の著者には含まれていませんでした。

12
Mr.doob

Chrome localhostからThree.jsを使用している場合は、Chromeを次のコマンドラインフラグで実行する必要があります。

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

もし、あんたが：

  • 自分のサーバーをセットアップしたくない
  • ブラウザのセキュリティをダウングレードしたくない

次に、少しの労力でこれを回避する方法を考え出しました。

  1. 画像をBase64テキストに変換する
  2. 外部のJavaScriptファイルに保存する
  3. プロジェクトページにリンクします
  4. テクスチャにロードします

興味のある人のための完全な詳細は http://tp69.wordpress.com/2013/06/17/cors-bypass/ にあります。

7
Tim

ルートフォルダーから次のコマンドを実行して、pythonを使用して単純なHTTPサーバーを実行することもできます。

python -m SimpleHTTPServer 8000
2
Santosh

1）Chromeショートカット->プロパティ->ショートカットタブ->ターゲットと追加-allow-file-access-from-filesついにターゲットに（これを行う前に、すべてのchromeタスクを終了します。）

[〜＃〜]または[〜＃〜]

2）Mongoose Webサーバーソフトウェアをダウンロードします。それを作業ディレクトリに入れて実行します。ブラウザで開きます http：// localhost：PORT すべてのファイルを提供します。

[〜＃〜]または[〜＃〜]

3）アプリケーションでNodeJS serverを使用することもできます。

1
Swapnil Hadge

完璧なソリューション：

THREE.js：クロスオリジンの画像の読み込みが拒否されました

timestampを画像のURLに追加するだけです。その背後にあるロジックはわかりませんが、動作します。

例：

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

これはコマンドライン\ターミナルで私のために働きました：

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

*コマンドを実行する前に、chromeのすべてのインスタンスを閉じる必要があります。

0
Ice101781