Serverless framework & Express & APIGateway でCORS対応

CORS(Cross-Origin Resource Sharing)問題は、ローカルで開発してるときにサーバで動いているAPIを叩こうとしたときに、Chrome等のWebブラウザでエラーになり怒られます。

この対処をすることで、ローカルでもAPIを叩くことが出来るので、

AWSのコンソールでポチポチせずに、CORS対応したかったのですが、中々ハマったのでメモ。
(実際には、CloudFrontの設定が必要なので、0ポチは無理でしたorz)

環境

• Serverless framework 1.20.2

Express側ですること

serverless.yml を以下のように編集します。

# serverless.yml
functions:
  app:
    handler:index.handler
    events:
      - http:
          path: /{proxy+}
          method: any
          cors: true

cors 対応するだけなら、trueに指定するだけなのですが、 express-on-serverless を使いたかったがために、methodの設定に苦しみました。

ちなみに、 express-on-serverless の デフォルトの書き方だと、下記のようになっており、 http: any {proxy+} をどうにか別の書き方で書きつつ、 cors: true をしようとすると上記のようになります。

# serverless.yml
functions:
  app:
    handler:index.handler
    events:
      http: any {proxy+}

CloudFrontですること

もし、API GatewayをCloudFront通さずに利用しているのであれば、この作業は不要です。

ここだけAWSのコンソールをいじります（（泣）

API GatewayのBehaviorで Origin ヘッダーだけ通します。

以上で設定は終了です！

まとめ

• Serverlessでcors対応するなら、 cors: trueをするだけ
• express-on-serverlessを使うなら、1工夫しましょう
• CloudFrontを通してApi Gatewayを利用するなら、Originヘッダーを通しましょう。

以上です。ここまで、読んでくださりありがとうございました。