S3 + CloudFrontでwebページをホスティングして、バックはAPI Gateway + LambdaでSPAを作りたいってときにAPI GatewayでCORSを有効化する必要があります。

マネコンからですと、ポチポチしてデプロイが必要となり、複数メソッドがあるとそれぞれに設定しないといけず、ちょっとめんどくさいかも。

Serverless FramworkならAPI GatewayのCORS有効化もデプロイと一緒に行えます。

こう書く

こちらの公式ガイドを参考にしました。

以下はサンプルのserverless.ymlの内容です。必要に応じて別のymlファイルからIAMについて書いたり、設定値を読み込ませたりしてください。


service: sample
provider:
  name: aws
  runtime: python3.6
  region: ap-northeast-1
functions:
  sample:
    handler: lambda_handler.main
    events:
      - http:
          path: sample/post
          method: post
          cors: 
            origin: http://localhost:8080
            headers: 
              - Content-Type
              - X-Amz-Date
              - Authorization
              - X-Api-Key
              - X-Amz-Security-Token
              - X-Amz-User-Agent
            allowCredentials: true

説明すると、corsの下で、 originでオリジンを指定。 headersに許可するヘッダーを記載。 allowCredentialsは認証情報がある場合は必要です。なければ省いてください。

デプロイ

sls deployでデプロイした後、コンソールから確認してみます。

OPTIONSメソッドが作成されており、CORSが有効化されてるくさいです。

OPTIONSメソッドの統合レスポンスを確認してみます。

ヘッダーのマッピングが記載されているのが確認できます。

メソッドレスポンスを確認してみます。

レスポンスヘッダーが追加されているのが確認できます。

補足

CORSを有効化する場合、API Gatewayの設定だけでなく、Lambda側でもレスポンスヘッダーに Access-Control-Allow-Origin ・ Access-Control-Allow-Credential をつけてやる必要があります。

例）


response = {
    "statusCode": 200,
    "headers": {
        "Access-Control-Allow-Origin" : "http://localhost:8080",
        "Access-Control-Allow-Credentials": "true"
    },
    "body": "{...}"
}

return response