AWS Lambda + API Gateway の使い方【初心者】の
POST版です。
json形式でPOSTされてくることを想定しています。
#Lambda用の関数を作成する
ソースは、AWS Lambda + API Gateway の使い方【初心者】と全く同じです。
#API Gatewayの作成
API Gatewayの設定も、ほぼ「GET」の時と同様ですが、違う点がいくつかあります。
##POSTの作成
メソッドに「POST」を作成します。
##メソッドリクエストの編集
初期のまま、特に編集は不要です。
##統合リクエストの編集
GETの時と少しテンプレートが違います。
{
"Value1": $input.json('$.Value1'),
"Value2": $input.json('$.Value2')
}
##API Gateway のテスト
リクエスト本文にテスト内容を記述し、「テスト」ボタンをクリックします。
予想通りの「レスポンス本文」が返ってきます。
##デプロイ
APIのデプロイを行います。
#テスト
こちらのサイトを参考に、テスト用の画面を作成します。
HTMLファイルからPOSTでJSONデータを送信する
<!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などの開発ツールでコンソールを確認すると以下のようなエラーが表示されています。
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を忘れていない？
##CORS対策
リソースから「CORSの有効化」を選択します。
初期値のまま、「CORSを有効にして既存のCORSヘッダーを置換」ボタンをクリックします。
本当は、「Access-Control-Allow-Origin」でドメインを限定した方が良いと思います。
実行すると、「OPTIONS」のメソッドが追加されますので、再度「デプロイ」します。
#再テスト
今度は、上手くいきました。
#参考
javascriptでAPI Gatwayにリクエスト送ったらエラーが出た！ ＞ それ、CORSを忘れていない？
HTMLファイルからPOSTでJSONデータを送信する