I am trying to create an API test function via AWS API Gateway and a Lambda function that is invoked via a Vue app with Axios. It is supposed to send a name and email from input elements. Every time I receive this error:
Access to XMLHttpRequest at '[API Gateway URL]' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
I have enabled CORS on each step/resource in the API Gateway setup (per this article). Here is the code for the Vue component:
<template>
<div data-app>
<div class="cell" id="testForm">
{{responseMsg}}
<label>Name</label>
<input v-model="name" type="text" placeholder="Name">
<label>Email Address</label>
<input v-model="email" type="email" placeholder="Email Address">
<button v-on:click="formFunction">Submit</button>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: "formtest",
data: function () {
return {name: '',
email: '',
responseMsg: 'No response yet!'}
},
methods: {
formFunction: function () {
const formObj = {
name: this.name,
email: this.email
}
const reqURL = [API gateway URL];
axios.post(reqURL, formObj)
.then(response => {
console.log(response);
});
}
}
}
</script>
And here is my Lambda function:
exports.handler = async (event) => {
const resString = 'Hello ' + event.name + ", your email address is " + event.email
const response = {
statusCode: 200,
headers: {
"Access-Control-Allow-Headers" : "Content-Type",
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "OPTIONS,POST,GET"
},
body: resString,
};
return response;
};
What could I be doing wrong here?
