AWSのCORS関連でハマったので設定をまとめます。
概要
下記のアーキテクチャで、
- S3バケットにWEBページ静的ホスティング
- 上記WEBページから、APIGatewayを経由して別のS3バケットからデータ取得
を行います。
しかし、静的ホスティングをしているバケットのドメインとデータが格納されているドメインが異なるので、CORSでハマります。
APIGatewayでのCORS設定
まずクライアントPCがcallするAPIGatewayのCORS設定をする必要があります。
スクショは省略しますが、
- API Gatewayのコンソール
- アクショントグルボタン押下
- CORSの有効化を選択。
- 表示される設定値はデフォルトでOK。必要であれば、Access-Control-Allow-OriginをS3の静的ホスティングのドメインと合わせる。
- APIGatewayのデプロイ
になります。公式はここ
これでもまだCORSでハマります。
なぜなら、S3のバケット自身もCORS設定を保有するためです。
S3でのCORS設定
こちらもスクショは省略します。
- S3のコンソールでバケットを開く
- アクセス権限
- CORS設定
- 下記のXMLドキュメントを記載して保存
config.xml
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>http://***</AllowedOrigin> <!-- ***はドメイン名-->
<AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>
公式はここ
これでようやく静的ホスティングしているS３バケットから、別バケットのデータが取得できました！！
まとめ
ローカルホストではなく、実際にホスティングしてみると詰まるところがちょこちょこあります。
筆者はCORSの知識は少なかったですが、実際に詰まることで結構勉強になりました。ホスティング大事。
※どうでもいいけど、AWSの新アイコン・旧アイコンどっちが人気なんだろ…
参考
https://qiita.com/tanj/items/e4486f9af5d7a903117d
https://qiita.com/matsumatsu20/items/0b7342e93daba150fa50