AWS Lambda + API Gateway<POST> の使い方【初心者】

[AWS Lambda + API Gateway<GET> の使い方【初心者】](https://qiita.com/koshi_an/items/fd1b97b35e52bab5f7e9)の
POST版です。

json形式でPOSTされてくることを想定しています。

#Lambda用の関数を作成する

ソースは、[AWS Lambda + API Gateway<GET> の使い方【初心者】](https://qiita.com/koshi_an/items/fd1b97b35e52bab5f7e9)と全く同じです。

#API Gatewayの作成

API Gatewayの設定も、ほぼ「GET」の時と同様ですが、違う点がいくつかあります。

##POSTの作成
メソッドに「POST」を作成します。

##メソッドリクエストの編集
初期のまま、特に編集は不要です。

##統合リクエストの編集

GETの時と少しテンプレートが違います。

```json:
{
"Value1": $input.json('$.Value1'),
"Value2": $input.json('$.Value2')
}
```

![スクリーンショット 2019-09-20 18.32.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125499/c73e4e64-a5b7-7ac8-357c-550d53dd53de.png)

##API Gateway のテスト
リクエスト本文にテスト内容を記述し、「テスト」ボタンをクリックします。

![スクリーンショット 2019-09-20 18.36.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125499/882fa925-81ef-5e38-0487-88170de0e97b.png)

予想通りの「レスポンス本文」が返ってきます。

![スクリーンショット 2019-09-20 18.37.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125499/633d76ec-66c8-81a5-9c51-214ed6044ae4.png)

##デプロイ
APIのデプロイを行います。

#テスト

こちらのサイトを参考に、テスト用の画面を作成します。
[HTMLファイルからPOSTでJSONデータを送信する](https://qiita.com/kidatti/items/21cc5c5154dbbb1aa27f)

```html:sample.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTMLファイルからPOSTでJSONデータを送信する</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<script type="text/javascript">
    $(function(){
        $("#response").html("Response Values");

        $("#button").click( function(){
            var url = "https://xxxxxx.execute-api.ap-northeast-1.amazonaws.com/dev";
                var JSONdata = {
                    "Value1": parseInt($("#value1").val()) ,
                    "Value2": parseInt($("#value2").val())     
                };

            alert(JSON.stringify(JSONdata));

            $.ajax({
                type : 'post',
                url : url,
                data : JSON.stringify(JSONdata),
                contentType: 'application/json',
                dataType : 'json',
                scriptCharset: 'utf-8',
                success : function(data) {

                    // Success
                    alert("success");
                    alert(JSON.stringify(data));
                    $("#response").html(JSON.stringify(data));
                },
                error : function(data) {

                    // Error
                    alert("error");
                    alert(JSON.stringify(data));
                    $("#response").html(JSON.stringify(data));
                }
            });
        })
    })
</script>

</head>
<body>
    <h1>HTMLファイルからPOSTでJSONデータを送信する</h1>
    <p>value1: <input type="text" id="value1" size="30" value="77"></p>
    <p>value2: <input type="text" id="value2" size="30" value="32"></p>
    <p><button id="button" type="button">submit</button></p>
    <textarea id="response" cols=120 rows=10 disabled></textarea>
</body>
</html>
```

実行すると、エラーになります。
chromeなどの開発ツールでコンソールを確認すると以下のようなエラーが表示されています。

```console:
jquery.min.js:4 OPTIONS https://xxxxxx.execute-api.ap-northeast-1.amazonaws.com/dev/ 403
sampleAdd.html:1 Access to XMLHttpRequest at 'https://xxxxxx.execute-api.ap-northeast-1.amazonaws.com/dev/' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
```

POSTで実行のはずなのに、OPTIONSが実行されています。
また、`Access-Control-Allow-Origin`というエラーも出ています。

これを解決するために、以下のサイトを参考に対応します。

[javascriptでAPI Gatwayにリクエスト送ったらエラーが出た！ ＞ それ、CORSを忘れていない？](https://qiita.com/g_ogawa/items/b10999954788d202e0ff#post%E3%81%AE%E5%A0%B4%E5%90%88)

##CORS対策
リソースから「CORSの有効化」を選択します。

![スクリーンショット 2019-09-20 18.50.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125499/cb70a03c-0444-de56-dd9c-5adbcf874f7e.png)

初期値のまま、「CORSを有効にして既存のCORSヘッダーを置換」ボタンをクリックします。
本当は、「Access-Control-Allow-Origin」でドメインを限定した方が良いと思います。

![スクリーンショット 2019-09-20 18.52.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125499/9b16882f-bc30-6914-96e0-6d47b32db805.png)

実行すると、「OPTIONS」のメソッドが追加されますので、再度「デプロイ」します。

#再テスト

今度は、上手くいきました。

![スクリーンショット 2019-09-20 18.55.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125499/ddd74d0e-5247-ae8a-9d06-077add342dfb.png)


#参考

[javascriptでAPI Gatwayにリクエスト送ったらエラーが出た！ ＞ それ、CORSを忘れていない？](https://qiita.com/g_ogawa/items/b10999954788d202e0ff#post%E3%81%AE%E5%A0%B4%E5%90%88)
[HTMLファイルからPOSTでJSONデータを送信する](https://qiita.com/kidatti/items/21cc5c5154dbbb1aa27f)