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>
imgタグを使用して画像を読み込んでも、CORSがサーバーに正しく設定されているとは限りません。クロスオリジンimg要素はCORSなしでも正常に動作します。 – sideshowbarker
curlなどを使用して画像を要求し、応答ヘッダーを確認してください。たとえば、 'curl -i -H 'はhttp:// localhost:3000 /" https:// s3-a/path-to-image "です。それからの応答に 'Access-Control-Allow-Origin'ヘッダがない場合、CORSはサーバ上で正しく設定されていません。 – sideshowbarker
CORSはホスト名 'localhost'で動作しますか?私はそうは思わない。 corsの設定を更新し、 'http://lvh.me:3000'を使ってテストサイトにアクセスしてみてください。 lvh.meホスト名は "localhost"と同等のテストです。 www.127.0.0.1.xip.io:3000を使用することもできますが、おそらく他にもあります。 –