260-AWS SAP AWS 「理論・実践・一問道場」CORSエラー
理論
CORSエラーの解決方法
CORS（クロスオリジンリソースシェアリング）エラーは、異なるドメイン間でリソースを共有しようとしたときに発生します。例えば、
www.example.com という静的サイトから別のドメインのAPI（api.example.com）にリクエストを送る場合、ブラウザはセキュリティ上、リクエストをブロックします。解決方法
CORSエラーを解決するためには、API側でリクエスト元ドメイン（例：
www.example.com）を明示的に許可する設定を行う必要があります。これを行う方法は次の通りです：- API Gateway でCORS設定を有効にし、
Access-Control-Allow-Originヘッダーを設定する。
- Lambda関数のレスポンスで
Access-Control-Allow-Originヘッダーを設定する。
- S3バケットにCORS設定を追加する（静的ウェブサイトホスティングの場合）。
これらの設定により、ブラウザはCORSエラーを解消し、リクエストを正常に処理できるようになります。
以下は、上記の内容を自然な日本語に訳したものです。
例として、前提のコードが以下のようになっています：
この場合、
https://api.example.com のレスポンスヘッダーには、次のような情報が含まれている必要があります：もしこのレスポンスヘッダーが含まれていない場合、ブラウザは前端のスクリプトがAPIのレスポンスデータにアクセスすることを拒否します。その結果、CORS（クロスオリジンリソースシェアリング）エラーが発生します。
- CloudFront：
CloudFrontがリクエストを適切なCORSヘッダーと共に転送するように設定します。CloudFrontはリクエストをオリジンサーバー（API GatewayやS3）に転送するだけなので、オリジンサーバーからの応答が正しいCORSヘッダーを含んでいることを確認する必要があります。
- API Gateway：
API GatewayでCORSを有効にし、レスポンスに
Access-Control-Allow-Origin: https://www.example.comを設定します。これにより、他のドメインからのリクエストが許可されるようになります。- S3：
S3のCORS設定を構成し、
www.example.comからのリクエストを許可します。S3にホストされている静的ウェブサイトのリソースに対して、他のドメインからのアクセスを許可するための設定です。これらの設定を行うことで、CORSエラーを回避し、正しく跨域リクエストを処理できるようになります。
実践
略
一問道場
会社は、ユーザー向けの登録フォームを含む認証なしの静的ウェブサイト（www.example.com）を運営しています。このウェブサイトはAmazon S3でホスティングされ、コンテンツ配信ネットワークとしてAmazon CloudFrontを使用し、AWS WAFが設定されています。登録フォームが送信されると、ウェブサイトはAmazon API GatewayのAPIエンドポイントを呼び出し、AWS Lambda関数がペイロードを処理して外部APIに転送します。
テスト中、ソリューションアーキテクトはクロスオリジンリソースシェアリング（CORS）エラーに直面しました。ソリューションアーキテクトは、CloudFrontディストリビューションのオリジンにAccess-Control-Allow-Originヘッダーがwww.example.comに設定されていることを確認しました。
このエラーを解決するために、ソリューションアーキテクトは何をすべきでしょうか？
A. S3バケットのCORS設定を変更し、AllowedOrigin要素にwww.example.comのルールを追加する。
B. AWS WAFでCORS設定を有効にし、Web ACLルールでAccess-Control-Allow-Originヘッダーをwww.example.comに設定する。
C. API Gateway APIエンドポイントでCORS設定を有効にし、APIエンドポイントが返すすべてのレスポンスにAccess-Control-Allow-Originヘッダーをwww.example.comに設定するように構成する。
D. Lambda関数でCORS設定を有効にし、関数の戻りコードにAccess-Control-Allow-Originヘッダーをwww.example.comに設定するようにする。
解説
正解は C です。
解説
CORSエラーは、異なるオリジン（ドメイン）間でリソースを共有する際に発生します。リクエストが送信されるサーバー（この場合はAPI Gateway）は、リクエスト元のオリジンを許可する必要があります。API Gatewayは、CORS（クロスオリジンリソース共有）を設定することで、他のオリジンからのリクエストを許可できます。
選択肢 C の内容は以下の通りです：
- API GatewayでCORS設定を有効にする：API Gatewayエンドポイントが、リクエスト元のオリジンを許可する
Access-Control-Allow-Originヘッダーを含むレスポンスを返すように設定します。これにより、ウェブサイトからAPI Gatewayを呼び出す際に、CORSエラーを解決できます。
他の選択肢が不正解な理由：
- A：S3のCORS設定は静的コンテンツに関連しますが、API GatewayのCORS設定が問題の根本的な原因です。
- B：AWS WAFはCORS設定を管理する機能を提供していません。CORSの設定はS3やAPI Gatewayで行います。
- D：Lambda関数内ではCORS設定を行いません。CORS設定はAPI GatewayまたはS3側で行います。
従って、API GatewayでCORS設定を有効にするのが正解です。
- Author:minami
- URL:https://www.minami.ac.cn/private-license/174d7ae8-88e2-8007-930b-cb0fc69b7dc2
- Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!
Relate Posts
