Serverless framework & Express & APIGateway でCORS対応

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ヘッダーを通しましょう。

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