Q&A###前提・実現したいこと
HTMLのWebフォームの入力内容をAjaxで通信しLambdaに送る処理を作成しております。
性格のはAPI Gatewayを経由してhtmlとLambdaの通信を行なっております。
html<--- API Gateway --> Lambda
###発生している問題・エラーメッセージ
現在、フォームの内容がLambda渡らずに困っております。
CloudWatchのログからLambdaにフォームの内容が渡っていない事を確認しております。
03:15:39 param = urllib.parse.parse_qs(event['body']) 03:15:39 KeyError: 'body'
###該当のソースコード
lambda側の関数になります。
lambda_function.py
1import json 2import boto3 3import urllib 4import time 5import decimal 6 7def lambda_handler(event, context): 8 print(json.dumps(event, indent=4)) 9 10 try: 11 # フォームに入力されたデータを得る 12 param = urllib.parse.parse_qs(event['body']) 13 username = param['username'][0] 14 email = param['email'][0] 15 16 # 結果を返す 17 return { 18 'statusCode' : 200, 19 'headers' : { 20 'access-control-allow-origin' : '*', 21 'content-type' : 'application/json' 22 }, 23 'body' : '<!DOCTYPE html><html><head><meta charset="utf-8"></head><body>成功しました</body></html>' 24 } 25 26 except: 27 import traceback 28 traceback.print_exc() 29 return { 30 'statusCode' : 200, 31 'headers' : { 32 'content-type' : 'text/html' 33 }, 34 'body' : '<!DOCTYPE html><html><head><meta charset="utf-8"></head><body>内部エラーが発生しました。</body></html>' 35 } 36 37
フォーム側のJavaScriptとフォームのhtmlになります。
index.html
1<html lang="ja"> 2<head> 3<meta charset="utf-8"> 4<title>jqueryのajaxのサンプル</title> 5<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 6<script> 7$( function() { 8 9 var apiUrl = 'xxxxxxxx/AjaxTestA';// API URL 10 11 $('#button').click( 12 function(){ 13 var formData = $("#form").serialize(); 14 console.log("formData:" + formData); 15 $.ajax({ 16 url:apiUrl, // 通信先のURL 17 type:'POST',// 使用するHTTPメソッド (GET/ POST) 18 data:formData, // 送信するデータ 19 dataType:'json', // 応答のデータの種類 (xml/html/script/json/jsonp/text) 20 contentType: "application/json", 21 timeout:1000, // 通信のタイムアウトの設定(ミリ秒) 22 // 通信に成功した時に実行される 23 }).done(function(response,textStatus,jqXHR) { 24 console.log("成功:" + jqXHR.status); 25 // 通信に失敗した時に実行される 26 }).fail(function(jqXHR, textStatus, errorThrown) { 27 alert("失敗:" + jqXHR.status); 28 console.log("失敗:" + jqXHR.status); 29 30 // 7. alwaysは、成功/失敗に関わらず実行される 31 }).always(function(){ 32 33 }); 34 }); 35}); 36</script> 37</head> 38<body> 39 40<form id="form" action=""> 41<input type="button" id="button" value="開始ボタン"><br/> 42氏名<input type="text" name="username"><br /> 43メールアドレス<input type="text" name="email"><br /> 44</form> 45</body> 46</html>
###作成手順
####1.Lambda関数作成
設計図から[microservice-http-endpoint-python3]を選択
関数名:AjaxTestA
####2.API Gateway:
API名:AjaxTestA
Lambda関数を作成時に自動生成だとメソッド: ANYになりCORSが有効にして効かない不具合が
あるため、ANYを削除しPOSTで新たにメソッドを作成
#####2-1.セットアップ
-統合タイプ
Lambda 関数
-Lambda プロキシ統合の使用
私用しない
-Lambda リージョン
アジアパシフィック(東京)なのでap-northeast-1
-Lambda 関数
AjaxTestA
デフォルトタイムアウトの使用
-チェック
#####2-2.階層
/
-/AjaxTestA
--POST
#####2-3.CORSの有効化
-CORSの有効化
-アクション-CORSの有効化
#####2-4.メソッドリクエスト
--URL クエリ文字列パラメータ
---path
--URL クエリ文字列パラメータ
---Content-Type
#####2-5.統合リクエスト
--本文マッピングテンプレート
---テンプレートが定義されていない場合 (推奨) をチェック
---Content-Type
----application/jsonに
-----テンプレート
'#set($inputRoot=$input.path('$')) { "path": "$input.params('path')" }
#####2-6.APIのデプロイ
-アクション-APIのデプロイ
-デプロイステージ
回答1件
0
自己解決
解決致しました。
統合リクエスト>本文マッピングテンプレートで取得する形式を定義する必要がありました。
詳細をまとめて後日、追記したいと思います。
投稿2017/12/18 08:33
総合スコア13
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。