API Gateway + API Key認証で403エラーが返ってきた際に対処したこと

はじめに

API Gatewayのエンドポイントをコールした際に403エラーが返ってきました。エラー解決の際に確認した点を本記事にまとめておきます。

解消のためにやった事（結論）

• API GatewayのステージとAPI keyの使用量プランを紐づけました（実施忘れ）
• OPTIONメソッド（プリフライトリクエスト）のAPI Keyが必須のチェックを外しました

環境

• フロントエンド: Vite + React
• バックエンド: AWS API Gateway + Lambda
• 認証: API Key認証

発生していた問題

PostmanからAPIのエンドポイントに対してのPOSTリクエストを送った際に、ステータス403で下記のレスポンスが返って返ってきました。

response

{
    "message": "Forbidden"
}

エラー事象発生の経緯

1. API Gatewayで新規APIを作成し、API認証にAPI Keyを使用する設定
2. API Keyを生成し、使用量プランを作成して紐づけ
3. CORS設定の有効化を設定
4. Viteで起動したローカルのフロント環境からAPIをコールしたところCORSエラーが発生
5. CORSエラーの確認のため、PostmanでAPIを直接コールしたところ403エラーが発生
6. API Gatewayと統合しているLambdaのCloudWatchログを見ても、該当の時間の実行ログ自体が出力されていないことを確認

これらの経緯から、APIリクエストがLambdaまで到達する前の認証段階で失敗していることが判明。

原因 & 対応

原因1：使用量プランとステージに紐づけができていなかった

• 対応：対象の使用量プランから > ステージを追加 を押下し、対象のAPIとステージを選択して紐づけて完了

原因2：OPTIONメソッドのAPIキーは必須のチェックを入れていた

• 対応：対象のAPIを選択し、メソッドリクエストを編集 > API キーは必須ですのチェックを外して完了

上記2点の対応を行い再度エンドポイントにPOSTリクエストを送ると、正常に想定のレスポンスが返ってきました。

参考