はじめに
こんにちは、Gakken LEAP のバックエンドエンジニアの Matsuura です。
今回は、あるWebアプリケーションで、S3に配置したコンテンツをCloudFront経由で取得する際に発生したCORS（Cross-Origin Resource Sharing）エラーの対処についてご紹介します。
対処方法
まず結論からお伝えします。
S3側の設定を以下のように変更することで、CORSエラーを解消できました。
1. AllowedOriginsの設定
S3バケットの「Permissions」タブにある「Cross-Origin Resource Sharing (CORS)」設定で、許可するオリジン（AllowedOrigins）を指定します。
これにより、レスポンスヘッダーに Access-Control-Allow-Origin: https://hoge.com を付与できるようになります。
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET",
"PUT",
"POST",
"HEAD"
],
"AllowedOrigins": [
// 許可するオリジンを設定
"https://hoge.com"
]
}
]
この設定で大半のCORSエラーは解決しますが、今回のケースではこれだけでは不十分でした。
2. ExposeHeadersの設定
今回の問題の解決には、ExposeHeadersの設定が鍵となりました。
[1. AllowedOriginsの設定]と同様に、CORS設定に ExposeHeaders を追加します。
ここには、Access-Control-Allow-Originを含む配列を指定しました。
[
{
// ...(略)
"AllowedOrigins": [
"https://hoge.com"
],
// 追加
"ExposeHeaders": [
"Access-Control-Allow-Origin"
]
}
]
以上の対応で、問題は無事解決しました。
CORSの仕組みと対処方法の詳細
CORSとは
CORS（Cross-Origin Resource Sharing）は、異なるオリジン間でリソースを共有する際に、セキュリティを確保するための仕組みです。
通常、ブラウザは異なるオリジンからのリクエストを制限しています。
例えば、https://hoge.com から https://api.fuga.com にリクエストを送信する場合、セキュリティ上の理由からリクエストがブロックされ、CORSエラーが発生します。
CORSエラーはブラウザ固有の機能であり、curlコマンドなどでは発生しません。
CORSエラーを回避するためには、サーバー側で特定のオリジンからのリクエストを許可する設定が必要です。
具体的には、サーバーがレスポンスヘッダーに Access-Control-Allow-Origin を含めることで、指定されたオリジンからのリクエストが許可されます。
たとえば、以下のようなヘッダーがレスポンスに含まれている場合、https://hoge.com からのリクエストが許可されます。
Access-Control-Allow-Origin: https://hoge.com
これにより、異なるオリジン間での安全なリソース共有が実現します。
ExposeHeadersとは
ブラウザのCORSポリシーでは、CORSリクエストで取得したレスポンスのヘッダーにアクセスできるのは、標準的なヘッダーに限られています。
アプリケーションがその他のヘッダーにアクセスするためには、ExposeHeadersを設定する必要があります。
私が担当しているプロジェクトでは、プリフライトリクエストを実装しており、その中で Access-Control-Allow-Origin ヘッダーをチェックする処理が含まれていました。
しかし、このヘッダーは「標準ヘッダー」ではないため、アクセスできないという問題が生じていました。
ExposeHeaders に Access-Control-Allow-Origin を設定することで、アプリケーションがこのヘッダーにアクセスできるようになり、CORSエラーを解消できました。
おわりに
今回は、CloudFront経由でS3のコンテンツを取得する際に発生したCORSエラーについて、その対処方法を解説しました。
特に、ExposeHeadersの設定が問題解決の鍵となり、CORSエラーの根本的な理解が重要であることを実感しました。
CORSエラーは、複雑ではありますが、正しい設定を行うことで回避可能です。
今回の対処方法が、同様の問題に直面した方々の参考になれば幸いです。
エンジニア募集中
Gakken LEAP では教育をアップデートしていきたいエンジニアを絶賛大募集しています！！
ぜひお気軽にカジュアル面談へお越しください！！