CORS issue when adding form data to backend - vuejs2

Question

Beginner in using vue and express here. I've been trying to follow a certain tutorial where they add a simple form data to a database but for some reason it gives this error on mine:
Access to XMLHttpRequest at 'http://localhost:3000/create' 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.
Here is what I made in the backend:
app.use('/create',(req,res,next)=>{
res.set({
"Access-Control-Allow-Origin":"http://localhost:8080",
"Access-Control-Allow-Headers":"Content-Type",
})
var mysql = require('mysql')
var connection = mysql.createConnection(config)
// SET ?
// `FirstName`=?, `LastName`=?, `Email`=?, `ContactNumber`=?
// [req.body.FirstName,req.body.LastName,req.body.Email,req.body.ContactNumber]
var sql = "INSERT INTO `guest` SET `FirstName`=?, `LastName`=?, `Email`=?, `ContactNumber`=?"
connection.query(sql,[req.body.FirstName,req.body.LastName,req.body.Email,req.body.ContactNumber],(err,results,fields)=>{
connection.end()
if(err){
next(err)
}else{
res.json([true,results]) //.insertId
}
})
})
and on the front-end:
<b-form v-model="contactForm" #submit="check();addGuest();" #reset="onReset" v-if="show">
<b-form-group
id="input-group-1"
label="Email address:"
label-for="input-1"
description="Give us an email to give a receipt to"
>
<b-form-input
id="input-1"
v-model="contactForm.Email"
type="email"
required
placeholder="Enter email"
></b-form-input>
</b-form-group>
<b-form-group id="input-group-2" label="Your Name:" label-for="input-2">
<b-form-input
id="input-2"
v-model="contactForm.FirstName"
required
placeholder="Enter first name"
></b-form-input>
<b-form-input
id="input-3"
v-model='contactForm.LastName'
required
placeholder="Enter last name"
></b-form-input>
</b-form-group>
<b-form-group
id="input-group-3"
label="Contact Number"
label-for="input-3"
description="Give us a contact number to give a receipt to"
>
<b-form-input
id="input-4"
v-model='contactForm.ContactNumber'
type="tel"
required
placeholder="Enter Contact Number"
></b-form-input>
</b-form-group>
<b-button type="submit" variant="primary">Submit</b-button>
<b-button type="reset" variant="danger">Reset</b-button>
</b-form>
Method script:
addGuest(){
//POST a guest
// evt.preventDefault()
// console.log(this.contactForm)
axios.post('http://localhost:3000/create',this.contactForm)
.then((res)=>{
console.log(res.data)
})
.catch((err)=>{
alert('AJAX error')
})
}
Am I missing something big here? I literally just modified what I've seen on the tutorial.

Answer 1

It's not that simple to "activate" Access-Control-Allow-Origin in Express - but it's not hard either:
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "YOUR-DOMAIN.TLD"); // update to match the domain you will make the request from
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
app.get('/', function(req, res, next) {
// Handle the get for this route
});
app.post('/', function(req, res, next) {
// Handle the post for this route
});
Source: https://enable-cors.org/server_expressjs.html
You have to set res.header and pass it to Express to use that setting.