LoginSignup
15
5

More than 1 year has passed since last update.

AWS APIGateway + Lambda プロキシ統合 の利用でCORS設定にはまった話

Last updated at Posted at 2019-11-25

要約

AWSのAPIGatewayを利用してAPIを作ったが、CORSの設定がどうも上手くいかない、、、
という所にはまった話です。
(昔作ったAPIは動くのに、、、なんで!?( ゚д゚)ハッ! )
 

結論から言うと、
「Lambda プロキシ統合」利用の場合、
CORSに関するレスポンスヘッダの設定は各自のプラグラム上でやれよ!:smirk:

という事です。
 
 
GUI上で、CORSの有効化をしても、レスポンスヘッダの「Access-Control-Allow-Origin」は反映されません。
(統合リクエストのタイプがLambdaの場合に有効になります。)
CORSの有効化ボタンが押せちゃうので混乱しちゃいますよね;;

AWS公式にも記載があります。
https://docs.aws.amazon.com/ja_jp/apigateway/latest/developerguide/how-to-cors.html
 

1.過去のAPIGateway

AWS APIGatewayは以前からあるサービスですが、
Lambda プロキシ統合がなかった頃は、APIの情報をLamdaへ流してやるために、
マッピングテンプレートなどを自分で設定する必要がありました。
(統合リクエストのタイプがLambda)

・Lambdaへ流す(メソッドリクエスト、統合リクエスト)
・Lambdaから返す(メソッドレスポンス、統合レスポンス)

2.過去のCORS設定

過去のLambda プロキシ統合がなかった頃(統合リクエストのタイプがLambdaの場合)、

API GatewayのGUI上の「CORSの有効化」というボタンをポチっと押すことで、
自動的にレスポンスヘッダ、統合レスポンスヘッダ、に各種設定を追加してくれていました。

APIGatewayが出始めの頃は、
公式ドキュメントの他、すばらしいエンジニアたちが残してくれた情報が溢れており、
これらはすんなりといった記憶があります。


 
上記の状態で、統合レスポンスヘッダを見ると設定が追加されていました。

 

3.Lambda プロキシ統合の登場

 
「マッピングテンプレートを、自分で設定するのって手間じゃね?」:weary:

という事で、「Lambda プロキシ統合」が出来ました。
Lambda関数側に多少の制約が出てきますが、楽になったと思います。

4.png

そもそも「Lambda プロキシ統合」って何やねん?
ってことですが、
後述します参考にあります @_mogaming さんの言葉が分かりやすく引用させていただきますと、

「このGatewayに対するリクエストの情報(HTTPメソッド、クエリストリング、パス、ソースIPなど)を勝手にまとめてくれて、Lambdaに渡してくれる」機能
という事です。

 

また、Lambda プロキシ統合を利用したAPIGateway自体については、
下記、Classmethodさんの記事が大変わかりやすいと思います。
API Gateway が「Lambda プロキシ統合」でさらに使いやすくなっててびっくりした話
 

4.Lambda プロキシ統合でのCORS設定

すばらしいエンジニアたちが残してくれた情報を元に、
「CORS設定を画面からポチッ」っと設定をしても反映されません。。。

なぜなら、「Lambda プロキシ統合」を利用することで、
「統合レスポンス」のめんどくさい設定を全部スルーしているんですもの!!:astonished:

もちろん、
「統合レスポンス」に設定してた「Access-Control-Allow-Origin」も効かないわけですよね;;
 
 
ということで、
レスポンスヘッダに自前で書いてください。
以下、例です。

■Node.js

exports.handler = function(event, context, callback) {

    callback(null, {
        statusCode: '200',
        body: "Hello world",
        headers: {
            "Access-Control-Allow-Origin": "*"
        }
    });

}

■Python

def lambda_handler(event, context):

    return {
        'statusCode': 200,
        'body': "Hello world",
        'headers': {
            "Access-Control-Allow-Origin": "*"
        }
    }

必要に応じ、header内にAccess-Control-Allow-Methodsも追加ください。

'Access-Control-Allow-Methods': 'OPTIONS,POST,GET'

参考:[2020/12/16 リンク切れとなっておりました]
https://github.com/awslabs/serverless-application-model/blob/master/examples/2016-10-31/api_swagger_cors/index.js

 
みなさまも快適なAPIGateway&Lambda生活を!:thumbsup:

参考にさせて頂きました。

AWS Lambda Proxy Integrationを試してみた
API Gateway が「Lambda プロキシ統合」でさらに使いやすくなっててびっくりした話

上記、APIGatewayやLambda プロキシ統合について、より詳細を解説されております。
(大変助かりました!!)

 

15
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15
5