AWS SAMでのCORS(Cross-Origin Resource Sharing)設定

背景

AWS SAMを使うとローカルで開発・テストしてLambdaにデプロイするのが楽になるが、CORSをどう設定すれば良いのかわかりにくかったので、試行錯誤して分かった最終形をここに残しておく。

設定

sam-confとapp.jsに設定が必要。sam-confの書き方は特殊で、AllowMethodsなどの設定を"''"で囲む必要があるので注意。
(Originアクセスを許可したいドメインをORIGIN_DOMAIN_NAMEと記載したので、自身の環境に合わせて置換してください。)

sam-conf

Globals:
  Api:
    Cors:
      AllowMethods: "'OPTIONS,GET'"
      AllowHeaders: "'*'"
      AllowOrigin: "'ORIGIN_DOMAIN_NAME'"

app.js

exports.lambdaHandler = async (event, context) => {
    const responseHeaders = {
      "Access-Control-Allow-Methods": "OPTIONS,GET",
      "Access-Control-Allow-Headers" : "*",
      "Access-Control-Allow-Origin": "https://ORIGIN_DOMAIN_NAME"
    }

    // any application code

    const response = {
        'statusCode': 200,
        headers: responseHeaders,
        'body': JSON.stringify({
            message: "Access allowed"
        })
    }

    return response;

確認

上記設定でデプロイしたら、ちゃんと設定できているかcurlで確認する。
({}の中身は自身の環境に合わせて変更してください)

$ curl -v -X GET https://{restapi_id}.execute-api.{region}.amazonaws.com/{stage_name}/{endpoint_name}

... 雑多なログ
< access-control-allow-origin: https://ORIGIN_DOMAIN_NAME
< access-control-allow-headers: *
< access-control-allow-methods: OPTIONS,GET

作ったもの

AWS SAMを使って、年賀状の写真から当選確認できるサイトを作りました。