S3上にあるファイルがうまく参照できないときのCORS設定

RailsでassetsファイルをS3に上げて、そこにある画像を参照しようとすることはよくあると思うのですが、その際にCORSではまったので対応メモ

Font-Awesomeを使おうとしてエラー

Font-Awesomeを使って表示しているところが、いわゆる豆腐状態（本来フォントが表示されて欲しいところが、□しか表示されない残念な状態）になっていたので開発者ツールのConsoleを確認。
すると、下記のようなエラーが表示されていました。

Font from origin 'https://hoge-bucket.s3.amazonaws.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://hogehuga.com' is therefore not allowed access.

※ URLはダミーのものです

エラー対応

おとなしくググってみると、S3上でAccess-Control-Allow-Originを設定しなければないけない、とのこと。

S3のバケット一覧へアクセスし、該当のバケットのプロパティを表示。
プロパティを表示すると画像のような表示が見えるので、アクセス許可のメニューを展開し、CORS設定の編集を選択。

すると、CORS 構成エディターなるモーダルが表示されるので、テキストフォームにCORSルールを記述します。 <サンプル>

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

S3側での設定は終わったので、Web上で確認すると、期待した通りに表示されています。
一件落着。

参考：
Cross-Origin Resource Sharing (CORS) - Amazon Simple Storage Service

CORSについて：
CORSまとめ - Qiita