3

S3 でホストされている JPG をテクスチャとして three.js モデルにロードする際に問題が発生しています。Chrome で CORS エラーが発生し、S3 が CORS をサポートしていることに気付き、開発中にそれをチェックするための非常に寛大なポリシーを設定しました (これまで CORS に遭遇したことはありません)。Firefox は問題ありませんが、Chrome と Safari ではまだエラーが発生します。

JPG は THREE.ImageUtils.loadTexture() によってテクスチャに読み込まれ、そのテクスチャがマテリアルに適用されます。

ロードする前に画像に次を追加しようとしましたが、うまくいかなかったようです:

img.crossOrigin = '';

私が持っている現在の CORS ポリシーは広く開かれています。

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>HEAD</AllowedMethod>
        <AllowedMethod>DELETE</AllowedMethod>
    </CORSRule>
</CORSConfiguration>

Chromeのエラーは

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

誰か私にこれに関するヒントを教えてください。

アップデート：

そのため、コードの早い段階で img.crossOrigin を設定していないことがわかりました。愚かな間違い:(

ただし、AllowHeader のヒントは役に立ちます。

4

1 に答える 1

1

ヘッダーに Content- を追加してみてください。

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>Content-*</AllowedHeader>
    <AllowedHeader>Host</AllowedHeader>
  </CORSRule>
</CORSConfiguration>
于 2012-10-12T09:00:59.363 に答える