I am trying to make a fetch (method POST) from my s3 hosted static website to one of my lambda functions, which runtime language is nodejs, through API Gateway.
Following the snippets about HTML post form, the JS script that does the post request converting the form data in json, and my nodejs lambda function.
<form name='form' id="myForm">
<div id=whatpageisit><a href='index.html'>LOGIN</a>SIGNUP </div>
<p> <label>Username <input type='text' name='username' value=''></label> </p>
<p> <label>Email <input type='email' name='email' value=''></label> </p>
<p> <label>Password <input type='password' name='password' value=''></label> </p>
<p> <label>Conferma Password <input type='password' name='conferma_password' value=''></label> </p>
<p> <div id="submit"><label> <input type='submit'></label></div> </p>
</form>
------------- JS
<script> // https://gomakethings.com/serializing-form-data-with-the-vanilla-js-formdata-object/
document.addEventListener('submit', function (event) {
event.preventDefault();
fetch('', {
//mode:"no-cors",
method: 'POST',
body: JSON.stringify(Object.fromEntries(new FormData(event.target))),
headers: {
'Content-type': 'application/json; charset=UTF-8'
}
}).then(function (response) {
if (response.ok) {
return response.json();
}
return Promise.reject(response);
}).then(function (data) {
console.log(data);
}).catch(function (error) {
console.warn(error);
});
});
</script>
--- LAMBDA FUNCTION
exports.handler = (event, context, callback) => {
context.callbackWaitsForEmptyEventLoop = false;
pool.getConnection(function(err,connection){
var user = event.body.username;
var email = event.body.email;
var password = event.body.password;
var sql0 = "INSERT INTO users VALUES ('"+user+"','"+email+"','"+password+"','')";
connection.query(sql0, function (error, result, fields) {
connection.release();
if (error) {
callback(error);
} else { callback(null,result); }
}); //end connection.query
}); //end pool.getConnection
}
I would also like to clarify that i believe my function has all the right permissions (In the IAM role associated with the Lambdafunction), as if i test Gateway inserting a request body in format json, the query is inserted successfully in the DB. Here there is a screen of the response, together with the response Header :
To specify that I Enabled CORS on my API and also my header response contains AllowControlallowOrigin : *.
Even though, when i tried to run my request through my homepage, i get this error
If i try to insert mode : no-cors, in the JS, i get this error : POST net::ERR_ABORTED 415 (Unsupported Media Type.
So i found some thread where it was explained that with mode: no-cors my form-data was in text/char, instead of the application/json that the Gateway expected it to be. (The Gateway has mapping templates on integration request (Lambda type) of content type application/json)
I tried to change the mapping template body content type to text/char, and went from ---> to :
Now, as expected and anticipated from our first error where it was established that enabling mode: no-cors would result in an opaque response :
So i dont know what to do and what is causing me problems. I dont understand, to begin with, why it does prompt me with the error about CORS when i have Enabled CORS from Gateway and even the Response Header contains AllowControlAllowOrigin : *.
Also i tried to add in s3 bucket options error page being index.html, as someone suggested as solution to the opaque response, but i get
In the end all i needed to do was : add Origin to API -> Enable Cors -> Allow Control Allow headers.