CORS issue with nodejs and react - node.js

Question

Good day to all of you. I'm trying to build a log in and right now im struggling with the register form, I'm using react js for FrontEnd and nodejs/express for BackEnd.
I created the register form, I'm putting data from this register form inside an object, parsing it to a JSON obj and sending it to the node server through fetch api, however the cors thing is not letting this happen, i'm not sure why. The next is the code from the register(front side)
import React, { useState } from 'react';
import './Register.css';
import Title from './Title/Title';
import Label from './Label/Label';
import Input from './Input/Input';
function Register(){
const [ name, setName ] = useState('');
const [ lastname, setLastname ] = useState('');
const [ email, setEmail ] = useState('');
const [ username, setUsername ] = useState('');
const [ password, setPassword ] = useState('');
function handleChange(name, value){
if(name==='name')setName(value);
else if (name==='lastname')setLastname(value);
else if (name==='email')setEmail(value);
else if (name==='username')setUsername(value);
else if (name==='password')setPassword(value);
}
function handleSubmit(e){
e.preventDefault();
let account = { name, lastname, email, username, password };
if(account)console.log(account);
var url = 'http://localhost:3030/';
fetch(url, {
method: 'OPTION',
body: JSON.stringify(account),
headers:{
'Content-Type': 'application/json'
}
}).then(res => res.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));
///////////////////////////////////////////////////////////////////////////////////
}
return(
<div className='register-div'>
<Title text='Register Form'/>
<div className='squareout'>
<div className='square'>
<Label text='Name'/>
<Input attribute={{type:'text', name:'name'}} handleChange={handleChange}/>
</div>
<div className='square'>
<Label text='Last Name'/>
<Input attribute={{type:'text', name:'lastname'}} handleChange={handleChange}/>
</div>
<div className='square'>
<Label text='E-Mail'/>
<Input attribute={{type:'text', name:'email'}} handleChange={handleChange}/>
</div>
<div className='square'>
<Label text='Username'/>
<Input attribute={{type:'text', name:'username'}} handleChange={handleChange}/>
</div>
<div className='square'>
<Label text='Password'/>
<Input attribute={{type:'password', name:'password'}} handleChange={handleChange}/>
</div>
</div>
<button className='boton' onClick = {handleSubmit}>Register</button>
</div>
)
};
export default Register;
and this is from the server side:
const express = require('express');
const app = express();
const port = 3030;
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`)
})
app.use(express.static('public'));
app.use(function(req, res, next) {
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader("Access-Control-Allow-Methods", "GET,POST,OPTIONS,DELETE");
res.setHeader("Access-Control-Allow-Headers", "X-Requested-With, Access-Control-Allow-Headers, Content-Type, Authorization, Origin, Accept");
res.setHeader('Access-Control-Allow-Credentials', true)
next();
});
app.use(express.json());
app.post('http://localhost:3030/', (request, response) => {
console.log(request.body);
const data = request.body;
response.json({
name: data.name,
lastname: data.lastname,
email: data.email,
username: data.username,
password: data.password
})
});
and yet I'm getting this error:
Line 33: fetch(url, {
this is from the first code, the front side

Answer 1

Instead of reinventing the wheel, you can use CORS
And simply do:
const cors = require('cors')
const app = express()
app.use(cors())

Answer 2

Simply when facing an CORS issue remember these concepts,
It is not front-end apps fault (mostly)
you are trying to cross domain requests
those are blocked by default
You can allow this by allowOrigins with backend (syntax varies on language)
problem here is accessing localhost:3030 from localhost:3000
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors())
//for single origin
var corsOptions = {
origin: 'http://localhost:8080',
optionsSuccessStatus: 200 // For legacy browser support
}
app.use(cors(corsOptions));
source

Answer 3

If you set Access-Control-Allow-Credentials to true means you are allowing credentialed request
res.setHeader('Access-Control-Allow-Credentials', true)
Then you can't set Access-Control-Allow-Origin to *(wildcard)
res.setHeader("Access-Control-Allow-Origin", "*");
so solution here is that,
you have to set specific origin here,(frontend app origin for reactjs by default its http://localhost:3000/)
res.setHeader("Access-Control-Allow-Origin", "http://localhost:3000/");

Answer 4

In the end I found the solution, first instead of the method 'OPTION' I used 'POST' and the on the server side, i changed 'http://localhost:3030/' to just '/' and worked.