react & node API - fetch function error - node.js

Question

I'm just new in React and NodeJS express programming and I'm stuck in some error for hours.
when I'm trying to fetch, sometimes I got a response (but not the my response)
and sometimes I got 'failed to fetch'.
I have tried to understand 'cors' concept without a lot of understanding,
but I have commit app.use(cors()) that allowed every source.
note that my server sometimes got 'OPTIONS' request, and sometimes getting 'POST' request.
in my React, I have this function:
fetch('http://localhost:3000/api/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify ({
user: this.state.username,
pass: this.state.password,
})
}).then(res => {
console.log(res.msg);
})
.catch(function(err) {
alert(err);
})
}
in my NodeJS I have this function:
router.post('/', (req, res) => {
let user = {
username: req.body.user,
password: req.body.pass
}
UserModel.findOne({'username': user.username, 'password' : user.password}, function(err, user) {
if (err) {
res.json({
ok: false,
msg: 'login failed, try later'
});
} else if (user) {
let token = jwt.encode(user, secret);
res.json({
msg: 'logged in',
ok: true
});
} else {
res.json({
ok: false,
msg: 'invalid input'
});
}
});
Im very confused, I hope you can help me.
Thanks.

Answer 1

You aren't accessing the JSON of the response correctly. You need to call the Body#json method of the response to actually access the JSON content. Also note that it returns a promise that resolves to the JSON content of a response:
fetch('…', { … })
.then(res => res.json())
.then(json => {
console.log(json.msg);
});
Also, I recommend sending an HTTP status code along with the JSON instead of having an ok property. That is a standard way and has builtin support through the Response object:
res.status(200).json({ … });