AWS S3のCORS設定でハマった話

S3でCORSを設定する必要がでてきたのですが、ちょっとしたミスに気づけず、しばらく手間取ってしまいました。

TL;DR（結論）

<AllowedOrigin>に指定するドメインの末尾には、スラッシュを付けてはいけない。

経緯

いままでCORSの設定をしていなかったS3のバケットに対して、CORSヘッダを設定する必要が出てきました。設定方法はAWS公式のヘルプにも載っていたので、それに従ってコンソールを開き、バケットの権限設定のCORSのところへ、必要な情報をXML形式で書き込む、というようになっていました。通すオリジンはデフォルトで*にしてもいいかと思ったのですが、念のために特定のドメインを指定しておくことにしました。

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>https://jkr2255.some-service.example/</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
 </CORSRule>
</CORSConfiguration>

これだけ設定して実際にアクセスを飛ばしてみるも、CORSが必要なリクエストは失敗してしまいました。あちこち調整した挙げ句、1文字が余計だったことに気づきました。

<CORSConfiguration>
 <CORSRule>
    <!-- 最後にスラッシュなし -->
   <AllowedOrigin>https://jkr2255.some-service.example</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
 </CORSRule>
</CORSConfiguration>

確かにお手本を見ればスラッシュはついていませんでしたが、ミスしそうなところなのに誰も言及していなかったので、ここにメモしておくこととします。

CORSの簡単なチェック方法

カスタムヘッダをセットできるツールでテストしてもいいのですが、当該のサイトを開けるなら、そこでコンソールを開いて、以下のように打てば他のツールなしでもレスポンス状況を確認できます。

fetch('https://path.to/file').then(console.log.bind(console));

まず最初にthenの返すPromiseが表示されますが、通信が終わったあとに、CORSが通っているならtype: "cors"と明記されたオブジェクトが出力されます。CORSでの通信ができない場合、エラーとなります。

外部リンク

• バケットで CORS を設定する方法（AWS公式）