Fetch returns empty JSON after POST request - express

Question

I'm using Fetch API to send POST request to my Express server, but I always get empty JSON ({}) instead of the data I have sent.
var postData = function (url, data) {
return fetch(url, {
body: JSON.stringify(data),
method: 'POST',
headers: {
'Content-Type': 'application/json'
}
})
.then(function (response) {
return response.json();
})
.then(function (data) {
return data;
});
};
var firstField = document.querySelector('#first-field').value;
var secondField = document.querySelector('#second-field').value;
if (firstField.trim().length && secondField.trim().length) {
postData('http://localhost:3000/test', { x: firstField, y: secondField })
.then(function (data) { console.log(data) })
.catch(function (error) { console.error(error) });
}
Here is the Express route:
app.post('/test', (req, res, next) => {
const x = req.body.x;
const y = req.body.y;
res.send(JSON.stringify({
x: x,
y: y
}));
});

Answer 1

spend the good amount of yesterday figuring this out.
You can solve it by installing cors middleware to express.
https://www.npmjs.com/package/cors
npm install cors
and add it to your app. before the body-parsers.
app.use( cors() )
app.use( bodyparser.urlencoded({ extended: true }) )
This should fix the empty body express is returning with Fetch API. Apparently using jQuery ajax post request works out of the box. Haven't investigating further why.
Good Luck.
/S