260-AWS SAP AWS 「理論・実践・一問道場」CORSエラー

type

status

date

slug

summary

理論

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エラーを解決できます。