AWS Lambda + API Gateway 사용법 [초보자]
12613 단어 5람다APIGatewayAWS
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 데이터 보내기
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>
실행하면 오류가 발생합니다.
크롬과 같은 개발 도구에서 콘솔을 확인하면 다음과 같은 오류가 표시됩니다.
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 데이터 보내기
Reference
이 문제에 관하여(AWS Lambda + API Gateway 사용법 [초보자]), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/koshi_an/items/98b12216a69258358d37
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
API Gateway의 설정도, 거의 「GET」의 때와 같습니다만, 다른 점이 몇가지 있습니다.
POST 만들기
메서드에 "POST"를 만듭니다.
메소드 요청 편집
초기에는 그대로 편집이 필요하지 않습니다.
통합 요청 편집
GET 때와 조금 템플릿이 다릅니다.
{
"Value1": $input.json('$.Value1'),
"Value2": $input.json('$.Value2')
}
API Gateway 테스트
요청 본문에 테스트 내용을 작성하고 테스트 버튼을 클릭합니다.
예상대로 "응답 본문"이 반환됩니다.
배포
API를 배포합니다.
테스트
이 사이트를 참고하여 테스트용 화면을 만듭니다.
HTML 파일에서 POST로 JSON 데이터 보내기
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>
실행하면 오류가 발생합니다.
크롬과 같은 개발 도구에서 콘솔을 확인하면 다음과 같은 오류가 표시됩니다.
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 데이터 보내기
Reference
이 문제에 관하여(AWS Lambda + API Gateway 사용법 [초보자]), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/koshi_an/items/98b12216a69258358d37
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!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>
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.
이번에는 잘 갔습니다.
참고
javascript에서 API Gatway에 요청을 보내면 오류가 발생했습니다! > 그것, CORS를 잊지 않았다?
HTML 파일에서 POST로 JSON 데이터 보내기
Reference
이 문제에 관하여(AWS Lambda + API Gateway 사용법 [초보자]), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/koshi_an/items/98b12216a69258358d37
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(AWS Lambda + API Gateway 사용법 [초보자]), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/koshi_an/items/98b12216a69258358d37텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
