2017-02-28 16 views
1

AWS S3バケットの画像をthree.jsのテクスチャとして使用しようとしています。私は次のエラーを取得 - の画像へThree.js AWS S3 CORS

アクセス「をhttps://s3-a ...」起源 「http://localhost:3000」からCORSポリシーによってブロックされました:いいえ 「アクセス制御 - 許可 - 起源」ヘッダが上に存在しますリクエストされた リソース。したがって、オリジン 'http://localhost:3000'は許可されません。

イメージをタグで表示する際に問題がないようにCORS設定を設定しました。 Three.jsスレッドに続いて私も使ってみました

myImage.crossOrigin = "anonymous" 
myImage.crossOrigin = "" 
THREE.ImageUtils.crossOrigin = "" 
THREE.ImageUtils.crossOrigin = "anonymous" 

更新:次のようにS3バケットに CORS設定がある -

<CORSConfiguration> 
    <CORSRule> 
     <AllowedOrigin>*</AllowedOrigin> 
     <AllowedOrigin>http://*</AllowedOrigin> 
     <AllowedOrigin>https://*</AllowedOrigin> 
     <AllowedMethod>GET</AllowedMethod> 
     <AllowedHeader>*</AllowedHeader> 
    </CORSRule> 
</CORSConfiguration> 
+0

imgタグを使用して画像を読み込んでも、CORSがサーバーに正しく設定されているとは限りません。クロスオリジンimg要素はCORSなしでも正常に動作します。 – sideshowbarker

+0

curlなどを使用して画像を要求し、応答ヘッダーを確認してください。たとえば、 'curl -i -H 'はhttp:// localhost:3000 /" https:// s3-a/path-to-image "です。それからの応答に 'Access-Control-Allow-Origin'ヘッダがない場合、CORSはサーバ上で正しく設定されていません。 – sideshowbarker

+0

CORSはホスト名 'localhost'で動作しますか?私はそうは思わない。 corsの設定を更新し、 'http://lvh.me:3000'を使ってテストサイトにアクセスしてみてください。 lvh.meホスト名は "localhost"と同等のテストです。 www.127.0.0.1.xip.io:3000を使用することもできますが、おそらく他にもあります。 –

答えて

1

問題は、私はImageUtils代わりのtextureLoaderを使用していたということでした。私はImageUtilsが廃止されたと考えています...