AWS API Gateway + LambdaでCORSを有効にする

Lambdaプロキシ統合を使用したREST APIにおいて、CORSを有効にしようと試みたところ、API Gateway側の設定だけでは有効になりませんでした。

API Gateway側のCORS設定

「アクション」から「CORSの有効化」を選択し、「CORSを有効にして既存のCORSヘッダーを置換」ボタンをクリックします。

「メソッド変更の確認」ダイアログが出てくるので、「はい、既存の値を置き換えます」をクリックします。

設定が完了すると、上記ダイアログに記載のあるとおり、OPTIONSメソッドが作成されます。※設定完了後の再デプロイを忘れずに!

しかし、実際に確認してみたところ、CORSのエラーが出てしまいうまく動作しませんでした。

調べてみたところ、AWSのドキュメントに以下の記載がありました。

Lambda 非プロキシ統合、HTTP 非プロキシ統合、AWS のサービス統合の CORS サポートを有効にする

Lambda カスタム (非プロキシ) 統合、HTTP カスタム (非プロキシ) 統合、または AWS のサービス統合の場合、API Gateway メソッドレスポンスおよび統合レスポンス設定を使用して、必要なヘッダーを設定できます。AWS マネジメントコンソールを使用して CORS を有効にすると、API Gateway は OPTIONS メソッドを作成し、既存のメソッド統合レスポンスに Access-Control-Allow-Origin ヘッダーを追加しようとします。これがうまく機能せず、CORS を適切に有効にするために統合レスポンスを手動で変更しなければならない場合もあります。通常、これは Access-Control-Allow-Origin ヘッダーを返すように手動で統合レスポンスを修正することを意味します。

Lambda プロキシ統合または HTTP プロキシ統合の CORS サポートを有効にする

Lambda プロキシ統合、または HTTP プロキシ統合の場合、API Gateway で必要な OPTIONS レスポンスヘッダーを引き続き設定できます。ただし、プロキシ統合は統合レスポンスを返さないため、バックエンドは Access-Control-Allow-Origin および Access-Control-Allow-Headers を返します。

出典:Amazon API Gateway 開発者ガイド – REST API リソースの CORS を有効にする

説明がいまいち理解できなかったのですが、うまく機能しない場合、もしくはLambdaプロキシ統合の場合は手動(Lambda側)でレスポンスヘッダーを設定する必要があると解釈しました。

Lambda側でレスポンスヘッダーを設定

Lambda側で以下のレスポンスヘッダーを設定してみたところ、正常に動作するようになりました!

  • Access-Control-Allow-Origin
  • Access-Control-Allow-Methods

これでCORSの有効化は完了です。