까먹기전 작성.
Header 설정,
return 을 다음과 같이 수정
모든 리턴마다 설정해 주어야 합니다.
return {
'statusCode':200,
'headers': {
'Access-Control-Allow-Headers': 'Content-Type',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'OPTIONS,POST,GET'
},
'body' : 'API return'
}Api gatway 설정
리소스 작업 CORS 활성화, 원하는 설정 체크.
고급 옵션 Access-Control-Allow-Credentials, 자격증명 요청시. 'true'
설정해봤는데 해도 안해도 변화없음...?
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<div id="app">
<button v-on:click="get">get</button>
</div>
<script>
const options = {
headers: {
'content-type' : 'application/json',
'x-api-key' : {api-key}'
}
}
new Vue({
el: '#app',
methods: {
get: function() {
axios.post('https://{lambda URL}/testFunc',
{},options)
.then(function(response) {
console.log(response);
})
.catch(function(error) {
console.log(error);
});
}
}
})
</script>
</html>간단하게 구성한 확인용 페이지.
설정을 변경하며 확인해 볼수 있었음.