見出し画像

Lambda + API GatewayでサクッとAPIを作るときのCORS設定ポイント

にゅうたろう

はじめに

仕事で事務方にサクッとAPIを作ってデータを提供するとき、Lambda + API Gateway を使うことが多い。クライアント側は簡単なJavaScriptで書いたHTMLをローカルで実行してもらう。

しかし、CORS（Cross-Origin Resource Sharing）の設定を忘れがちで、結局サクッとできずにハマることが多い。今回は、そのポイントを備忘録としてまとめる。

統合プロキシを使う

API Gatewayでレスポンスを変更するのではなく、Lambdaのレスポンスをそのまま返すため、統合プロキシ（Lambda Proxy Integration） を使用する。

この場合、LambdaのレスポンスにもCORS用のヘッダーが必要になる。ここを忘れるとCORSエラーが発生するので注意！

Lambdaの実際のコード例（処理省略）

import json

def lambda_handler(event, context):
    return {
        "statusCode": 200,
        "headers": {
            "Access-Control-Allow-Origin": "*",
            "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
            "Access-Control-Allow-Headers": "Content-Type, x-api-key"
        },
        "body": "Hello, World!"
    }

OPTIONSリクエストの重要性

特に重要なのが、OPTIONSリクエスト のレスポンス。ブラウザがプリフライトリクエスト（事前確認リクエスト）を送るため、適切に設定しないとCORSの制約をクリアできない。

API Gatewayで新規作成するとデフォルト値を使いがちだが、そのままだと疎通が成功せず、何度もデプロイを繰り返すハメになる。

OPTIONSメソッドのLambdaレスポンス例：

{
  "statusCode": 204,
  "headers": {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
    "Access-Control-Allow-Headers": "Content-Type, x-api-key"
  },
  "body": ""
}

統合レスポンスのヘッダー設定のクセ

統合レスポンスのヘッダーをマッピングする際、メソッドレスポンスの設定でヘッダーを追加していないと反映されない。

「そういうものだから」と言われればそれまでだが、個人的にはクセがある仕様だなと感じる。

また、統合レスポンスのヘッダーのマッピング時、値をシングルクォートで囲む必要があるのも注意点。

例えば、以下のように設定しなければならない：

Access-Control-Allow-Origin  → '*'
Access-Control-Allow-Methods → 'GET, POST, OPTIONS'
Access-Control-Allow-Headers → 'Content-Type, x-api-key'

「これ、知らんがな…」と言いたくなる仕様だが、知っていれば設定ミスを防げる。

CloudFormationを使えばもっと楽に

手作業で設定するとミスしやすいが、CloudFormationのテンプレートを使えばサクッと構築できる。

とはいえ、コンソールでポチポチやりながら何をやっているかを理解するのも大事だと思う。俺だけか？

APIキーの設定

セキュリティ対策として、API GatewayではAPIキーを使う。

ただし、これが結構面倒で、キーには 必ず使用量プラン（Usage Plan）が必要になる。 さらに、APIのステージに紐づける必要がある。

APIキー設定の流れ

  1. APIキーを作成

  2. 使用量プランを作成（リクエストレート、バースト、クォータを設定）

  3. 作成した使用量プランにAPIキーを紐づける

  4. API Gatewayのステージに使用量プランを適用

慣れていないと「え、これいるの？」と思うポイントだが、設定しないとAPIキーが機能しない。

まとめ

  • Lambda Proxy Integration を使う場合、CORSヘッダーをLambdaのレスポンスに含めるのを忘れない

  • OPTIONSリクエストのレスポンスがCORS設定の鍵

  • APIキーには使用量プランが必須！ステージに紐づけるのを忘れずに

  • 統合レスポンスのヘッダー設定時、メソッドレスポンスにヘッダーを追加しないと反映されない点に注意

  • 統合レスポンスのマッピング時、値をシングルクォートで囲む仕様を忘れない

この備忘録が、未来の自分や同じ問題で悩む誰かの助けになれば嬉しい🤗

いいなと思ったら応援しよう！