最近s3のCORSポリシー設定周りでごたついたことがあったので備忘録。
背景
簡単なwebアプリをs3 + CloudFrontのシステム構成で構築し公開。
が、デフォルトのCloudFrontのURLだと視認性が悪いので、カスタムドメインでアクセスできるようにroute53にAレコードを追加する対応を行なっていました。
# これだと視認性悪い
~~~~~~~.cloudfront.net
# 以下のようなカスタムドメインに変更
~~~hogehoge.jp
構成
※route53追加後の構成
この構成で発生したエラー内容
追加構築したカスタムドメインのURLにアクセスした際、S3のファイルを参照する部分のみ以下のようなcorsエラーが発生。
Access to XMLHttpRequest at 'http://http://bucket.s3-ap-northeast-1.amazonaws.com/?max-keys=0' from origin 'http://hogehoge.jp' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
解決
この際新しく追加したroute53 or CloudFront周りで何某設定し忘れたっけ？と思っていたんですが..
s3ファイル参照部分のみCORSエラーが発生しているということで、よくよく考えると原因はs3側の設定にありました。
そもそもCORSとは
CORSとは、Cross-Origin Resource Sharingの略。
詳細は省きますが、端的にいうと以下のようなもので、今回のような『複数ドメインを経由する』場合には『CORSを許可してないとリソース元からアクセス拒否されたりする』ものになります。
- CORS
- ブラウザのポリシーで異なるオリジンへのアクセスを許可するもの
- CORSエラーの解決方法
- アクセスを受ける側(サーバー側に）レスポンスヘッダにAccess-Control-Allow-Originヘッダを付与する設定を追加する
※非常にわかりやすかったため以下から引用させていただきましたmm
詰まるところ、今回は 『新しく追加したカスタムドメイン』から『s3のバケット』に対してアクセスをするためのCORSの許可がなかった ためエラーが発生していた形でした。
具体対応
AWS s3ではCORSの設定を、コンソールの[Cross-origin resource sharing]から以下のようにjsonで記載して追加できるようになっているので、以下のように追加してやればOK。
[
{
"AllowedHeaders": [
"Authorization"
],
"AllowedMethods": [
"GET",
"HEAD"
],
"AllowedOrigins": [
"http://~~~~~~~.cloudfront.net", ←CloudFrontのURL。ここは以前設定していた..。
"http://www.hogehoge.jp" ←ここ追加
],
"ExposeHeaders": [
"Access-Control-Allow-Origin"
]
}
]
※コンソールから追加する流れがわかりやすい記事：
※参考公式：
また、今回私の場合はterraformで管理していたので以下のように設定しました。
resource "aws_s3_bucket" "source" {
省略~~~
cors_rule {
allowed_headers = ["*"]
allowed_methods = ["GET", "PUT", "POST", "DELETE", "HEAD"]
allowed_origins = [
"CloudFrontのURL", ←CloudFrontのURL。ここは以前設定していた..。
"カスタムドメインのURL" ←ここ追加
]
省略~~~
}
}
※参考公式：