Amazon S3でホストされている静的ウェブサイトから、JavaScript（AJAX）を使用して別のドメインにあるAmazon API Gatewayエンドポイントを呼び出したところ、ブラウザのコンソールに「No '

Question

Amazon S3でホストされている静的ウェブサイトから、JavaScript（AJAX）を使用して別のドメインにあるAmazon API Gatewayエンドポイントを呼び出したところ、ブラウザのコンソールに「No 'Access-Control-Allow-Origin' header is present on the requested resource」というエラーが表示され、通信がブロックされました。この問題を解決するために必要な設定はどれですか。

Accepted Answer

正解: API GatewayのリソースレベルでCORS（Cross-Origin Resource Sharing）を有効にし、適切なOPTIONSメソッドとレスポンスヘッダーを設定する。。異なるドメイン（オリジン）からAPIを呼び出す場合、ブラウザの同一オリジンポリシー（Same-Origin Policy）により通信がブロックされます。これを解決するには、サーバー側（この場合はAPI Gateway）でCORS（Cross-Origin Resource Sharing）を有効にする必要があります。API Gateway上でCORSを有効化すると、事前リクエスト（Preflightリクエスト）に応答するためのOPTIONSメソッドが自動的に作成され、必要な `Access-Control-Allow-Origin` ヘッダーが返されるようになります。

Answer

API GatewayのIAMリソースポリシーを更新し、S3バケットのARNからの execute-api:Invoke アクセスを許可する。 — IAMポリシーはバックエンドの権限管理用であり、ブラウザが強制するCORSエラーの解決には関係ありません。

Answer

S3バケットポリシーでパブリックアクセスを許可し、CORS構成ルールにAPI Gatewayのドメイン名を追加する。 — リクエストの宛先はAPI Gatewayであるため、S3バケットのCORS設定を変更してもAPIリクエストのエラーは解消しません。

Answer

クライアント側のJavaScriptコードで、HTTPリクエストヘッダーに直接 `Access-Control-Allow-Origin: *` を追加して送信する。 — Access-Control-Allow-Origin ヘッダーはサーバー（API側）がブラウザに返すレスポンスヘッダーであり、クライアントのリクエストヘッダーに付与するものではありません。

解説