Serverless FrameworkでCORS有効化したAPI Gatewayの作成

AWS運用自動化サービス「Cloud Automator」

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

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

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

こう書く

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

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

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

デプロイ

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

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

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

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

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

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

補足

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

例)

まとめ

いかがでしたでしょうか。Serverless Frameworkで簡単にCORS有効化ができました。あとは各自でS3にデプロイしたwebページからAPI叩いてみてください。

AWS運用自動化サービス「Cloud Automator」