本番環境でActionTextで投稿された画像をAWSのEC2煮上げた画像をS3のバケットの中に保存しておくようにしたのですが、そこで本番環境でS3の方に保存されないというもんだいがおきました。
慌てて検証ツールを見てみるとそこでCROSの処理の問題であるというエラーメッセージが出てきました。
私その時CROSについて全く知らなかったので改めてググって調べてみました。

CROSとはなにか

ブラウザがオリジン(HTMLを読み込んだサーバのこと)以外のサーバからデータを取得する仕組みです。
今回で言うところの、EC2でHTMLLを読み込まれていますが、画像に関してはS3にあるのでS3からHTMLとして画像を持ってくるといったことが必要になってきます。
その時に役に立つのがCROS処理です。

出典

今回の失敗

S3のCROS処理のポリシーを書いておくべき所が空欄だったので、保存ができませんでした。

解決策

CROS処理を許可できるようにポリシーを書いていった所保存することができました。

私は以下のようにして書きました。

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

そうした所、無事保存ができました。

いやー良かったよかった。

出典

お役に立てれば幸いです。