AWS S3のCORS設定がグレーアウトして編集できない場合の対処方法

S3のCORS構成エディタの編集ができない・・・なぜそうなのか理由はあるのだろうけど、僕にはさっぱりとわからないです。そして、以降のことをすることにより、特に原因がわからないまま、改善したので備忘録代わりに掲載します。

どこのプログラムなのかは別として、開発者から以下のエラーが出て、画像にアクセスできなーい？っていう問い合わせがきました。

Access to image at 'https://www2.abcxxxxx.com/abc-mages/786959437222742.jpg' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

nginxのリバースプロキシで画像を取得しているので、nginxのヘッダー追加で改善できるのかと思いきや。。。できない。どうも自分は、CORSの基礎がわかっていないようで・・・。

そこで、本題のS3側の、CORSの設定の話に繋がるので、、

CORSの設定は、対象のバケットの「アクセス権限 - CORSの設定」で確認できます。自分の場合は、もれなくグレーアウトしています（汗）何も編集できなーい！！

CORSって何？

Cross Origin Resource Sharing の頭文字をとったものです。まあ、あまり詳しくはわからないのですが、異なるドメイン間で画像とか動画等をやりとりする為のセキュリティを守るしくみみたいなものだと私は思ってます。www.aaaaqaz12wsde34.com から www2.abcxxxxx.comの画像をアクセスするのは許可するよーとかそういうのをヘッダで制御するしくみですね。wev-apiとかjavascriptとかが近年進化しているので、セキュリティ的にそういうしくみができたのかなー？って思ってます。

そんなこんなで、いつの日からか、aws s3にもCORSの設定ができたって感じです。（・・というか前からあって自分が気にしていなかったかもですが・・）

編集できるようにするためにはどうするの？

CORSの詳細は、すみませんが自分が無知すぎるので、話はおいておいて。編集できるようになった証跡を以降記載していきます。

編集できるようにするためにやったこと

手順でもなんでもないですが（汗）同じように悩んでいる方がいることを信じて書いていきます。

CLIから実行する

はい、やったのはこれだけです（汗）CLIを利用できるようにする為の環境設定につきましてはこちらに記載しましたのでご参考にどうぞ。

hit.hateblo.jp

• jsonファイルを作成する

CORSの設定ファイルをまず作成します。以降bashで書きます。ちなみに、以下の設定は、みなさんの環境によってまちまちなので注意してくださいね。

$ cat << '_EOT_' > CORS.json
{
  "CORSRules": [
    {
      "AllowedOrigins": ["*"],
      "AllowedMethods": ["GET"],
      "MaxAgeSeconds": 3000
    }
  ]
}
_EOT_

• cliでCORS設定

上記で、CORS.jsonファイルが作成できましたら以下のコマンドを実行します

$ aws s3api put-bucket-cors --bucket [バケット名] --cors-configuration file://CORS.json

• 結果確認

Amazon Web Services 基礎からのネットワーク&サーバー構築 改訂版

再度AWS マネージメントコンソールで確認すると。。。あら不思議・・編集できるようになってます (^_^;)

うーん、、、なんでだろ、、、なんでだろうと思いつつ、結果編集できるようになったからいいやと思いつつこの話は終わりにしたいと思います（笑）

役に立たなそうな話ですみません。