React Cors issue with ExpressJS - reactjs

Question

EDIT: I am getting the following error when trying to access my server:
POST http://localhost:3001/user/login 500 (Internal Server Error)
I'm not sure where I'm going wrong for this error to keep occurring:
React:
export default class Account extends React.Component {
constructor() {
super();
this.state = {
isLoggedIn: false,
};
this.login = this.login.bind(this);
}
componentDidMount() {
const cookies = new Cookies();
const user = cookies.get('user');
const pass = cookies.get('pass');
this.setState({processing: true})
fetch('http://localhost:3001/user/login', {
credentials : 'omit',
method : 'POST',
body : JSON.stringify({
username : user,
password : pass
})
})
.then(res => res.json())
.then(json => {
// If the login was successful
if (json.success) {
this.setState ({
isLoggedIn: true
})
}
// Otherwise
else {
this.setState({
errorMessage: 'Invalid username or password',
processing : false
});
}
})
.catch(() => {
this.setState({
errorMessage: 'An unknown error occurred',
processing : false
});
});
}
render() {
if(this.state.isLoggedIn) {
return (<p> Logged In</p>);
}
else {
return (<p> Not Logged In</p>);
}
}}
Express:
router.post('/login', (req, res) => {
return User
.findOne({username: req.body.username})
.then (user => user.authenticate(req.body.password))
.then (auth => {
if (auth.user !== false) {
req.session.user = auth.user.user
}
res.json({success: auth.user !== false})
})
.catch(() => res
.status(500)
.json({success: false})
);
});
This error isn't giving much info on what I could be doing wrong but it could be to do with cors.

Answer 1

There problem is not in your code ( probably ); since a request will be considered as SAME-ORIGIN if domain, port and protocol all be the same in source and destination of the request; but your request is heading to port 3001 not 3000 which violates the same-origin rule; hence CROSS-ORIGIN; two other part are ok, both on localhost and http but port different; you need to configure your server to respond properly to OPTION(pre flight) request to fix this properly;

Answer 2

Have you added a proxy parameter to the package.json? I use this setup frequently but have not seen the issue you are seeing. Try adding the following parameter to the package.json
{
"name": "mern",
"version": "0.1.0",
"proxy": "http://localhost:3001/"
...
}
And then all of your API calls can just be /api because the proxy parameter has been set.

Answer 3

Your console reads: Cannot read property 'authenticate' of null.
In your .catch of api -
.catch(() => res
.status(500) // you are sending 500 (internal server error) irrespective of what your actual error is//
.json({success: false})
);
Your error is -
return User
.findOne({username: req.body.username})
.then (user => user.authenticate(req.body.password)) //can read authenticate of null because user is null i.e This user does not exist in your DB. //
I suggest add err in your catch block as parameter and do proper error handling. This issue is the case of improper error handling.