[AWS SAM] Lambda関数でOPTIONメソッドを作り「CORSの複数origin対応」を攻略する②(シンプルな代案の説明)

前置き

• この記事では「CORSの複数origin対応」はしません
• Lambda、API Gatewayの動作を知るため、色々試した中の一つを覚書として残しただけになります

対象となる状況

• シンプルなCORS対応のためのOPTIONSメソッドを全メソッドに付与したい
  • 例えば、動作確認のため「許可するoriginは ”*(全て)” または “任意の1origin” 」でOKな状況など

記事の構成

• [AWS SAM] Lambda関数でOPTIONメソッドを作り「CORSの複数origin対応」を攻略する①(概要説明)
  • 全体的な説明、CORSについてなど
• [AWS SAM] Lambda関数でOPTIONメソッドを作り「CORSの複数origin対応」を攻略する②(シンプルな代案の説明)
  • 本記事
• [AWS SAM] Lambda関数でOPTIONメソッドを作り「CORSの複数origin対応」を攻略する③(実装説明)
  • 本当に伝えたい内容

結論を見たいだけな場合は③を参照してください！

環境

• macOS: Big Sur v11.6.1(Intel)
• バックエンド(Lambda関数を呼び出すAPIをSAMで構築する)
  • SAM CLI: 1.42.0
    • Runtime: node.js 14.x (Typescript)

手順

1. API GatewayにCORSを設定する

• template.ymlに次の記載を行い $ sam deploy することで、GETやPOSTが設定されているエンドポイントにOPTIONSが自動で付与される

template.yml

   Globals:
      Api:
++      Cors:
++        AllowOrigin: "'*'"
++        AllowMethods: "'GET,POST,OPTIONS'"
++        AllowHeaders: "'Content-Type, Authorization, Accept, timeout'"

2. Lambda関数のレスポンスヘッダーにCORSの許可関連設定を追加する

example.ts

import { APIGatewayProxyEvent, APIGatewayProxyResult } from 'aws-lambda';
import 'source-map-support/register';

export const exampleHandler = async (
  event: APIGatewayProxyEvent
): Promise<APIGatewayProxyResult> => {
  return {
    statusCode: 200, 
		headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET,POST,OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type, Authorization, Accept, timeout',
    },
    body: JSON.stringify({
      message: 'Hello world!',
    }),
  };
};

3. 動作確認

• 'Access-Control-Allow-Origin': '*' としているため、フロントからのGETのAPIコールが問題なく通っているはず

注意点

統合リクエストタイプが”MOCK”となっている

• ちょっと複雑なことやりたいときは、Preflight(OPTION)用のLambda関数を用意して、mockの代わりにそのLambda関数を呼び出すように設定する
  • 「複雑なこと」とは、例えばAccess-Control-Allow-Originは 複数のoriginを許可することはできない のでどうにかしたい！など
  • 手前味噌ですが次の記事を参照してください
    • Preflight(OPTIONS)をLambda関数で自作する(複数originの許可対応)

シングルクォテーションとダブルクォテーションを併用しているのは何？

AWS SAMのCORSを設定する（REST APIバージョン） - Qiita

"'*'"というシングルクォテーションとダブルクォテーションを両方使う書き方がマストみたいです。どちらかだけのクォテーションにしてしまうとError: AllowHeaders must be a quoted string (i.e. "'value'" is correct, but "value" is not).
てな具合に怒られます。

• 自分の環境ではちょっと書き方が違ったけどエラーになりました