Can't receive data from form - reactjs

Question

The problem I currently have is that when I send my form data in React using axios or even without it I am unable to retrieve my data on the backend side using express. I am viewing the request received on the back end console but am unable to access it via code. React code is via Node on port 3000, Express on 3001. Application was created using create-react-app, here is a picture:Problem
Project Structure:
cssd -> Where I run npm start launching back end
cssd/routes/ -> Where users.js is located with the routes to obtain code
cssd/client/ -> Where i run npm start launching front end
cssd/client/src/setupProxy.js -> where my proxy route is
I've already tried creating a setupProxy.js file as well as numerous get / post methods trying to receive the data and any of the info available on stack has been searched as well but if I've missed something please let me know. Even with a console.log at the base, i still can't receive it.
Within setupProxy:
const proxy = require('http-proxy-middleware');
module.exports = function(app) {
app.use(proxy('/routes/*',
{ target: "http://localhost:3001/" }
));
}
Within client's App.js / React:
render() {
return (
<form id="contact-form" onSubmit={this.handleSubmit.bind(this)} method="POST">
<div className="form-group">
<label htmlFor="name">Name</label>
<input type="text" className="form-control" id="name"/>
</div>
<div className="form-group">
<label htmlFor="exampleInputEmail1">Email address</label>
<input type="text" className="form-control" id="email" aria-describedby="emailHelp"/>
</div>
<div className="form-group">
<label htmlFor="message">Message</label>
<textarea className="form-control" rows="5" id="message"></textarea>
</div>
<button type="submit" className="btn btn-primary">Submit</button>
</form>
)
}
handleSubmit(e)
{
e.preventDefault();
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const message = document.getElementById('message').value;
var inputData = {name, email, message};
fetch('/routes/users',
{
method: 'POST',
body: inputData
})
alert("sent data");
this.resetForm();
}
Within routes/users.js / Express code:
var express = require('express');
var router = express.Router();
const bodyParser = require("body-parser");
const app = express();
app.use(
bodyParser.urlencoded({ // basically any extra characters
extended: true
}),
bodyParser.json()
);
// Re-directs, ex entered in nothing, go to get
router.get("/routes/users", function(req, res) {
console.log("HERE 1 !");
var name = req.body.name;
var email = req.body.email;
var message = req.body.message;
console.log("The data: ", name, email, message);
});
router.post("/routes/users", function(req, res) {
console.log("HERE 2 !");
var name = req.body.name;
var email = req.body.email;
var message = req.body.message;
console.log("The data", name, email, message);
});
app.get("/routes/users", function(req, res) {
console.log("HERE 3 !");
var name = req.body.name;
var email = req.body.email;
var message = req.body.message;
console.log("The data: ", name, email, message);
});
app.post("/routes/users", function(req, res) {
console.log("HERE 4 !");
var name = req.body.name;
var email = req.body.email;
var message = req.body.message;
console.log("The data", name, email, message);
});
router.get("routes/users", function(req, res) {
console.log("HERE 5 !");
var name = req.body.name;
var email = req.body.email;
var message = req.body.message;
console.log("The data: ", name, email, message);
});
router.post("routes/users", function(req, res) {
console.log("HERE 6 !");
var name = req.body.name;
var email = req.body.email;
var message = req.body.message;
console.log("The data", name, email, message);
});
app.get("routes/users", function(req, res) {
console.log("HERE 7 !");
var name = req.body.name;
var email = req.body.email;
var message = req.body.message;
console.log("The data: ", name, email, message);
});
app.post("routes/users", function(req, res) {
console.log("HERE 8 !");
var name = req.body.name;
var email = req.body.email;
var message = req.body.message;
console.log("The data", name, email, message);
});
const port = 3000;
//console.log(`Back end is listening on port ${port}`);
app.listen(port, () => console.log(`Back end is listening on port ${port}`));
module.exports = router;
The expected results should be that I receive a console.log from one of the functions and can then work with my code from there but I'm just unable to get any of them to be called. Only thing shown in the console is on the back-end side receiving the request

Answer 1

Remove all proxying from the server as this is only if you are serving the client and server from the same host and port. So make sure your app.listen is on a different port than your client like so.
const port = process.env.PORT || 5000
app.listen(port, () => console.log(`listnening on ${port}`));
Is this app set up with Create React App? If so you can add a proxy to the package.json of the client (React)
"proxy": "http://localhost:5000"

Answer 2

Create react app uses webpack dev server to serve your app to the browser. You can use a proxy from your client to achieve want you want.
In your package.json of your react app, add "proxy": "http://localhost:3001"
Here is more info about this from the create react app docs.
Your backend code does not need any changes to make this work, in fact I would even remove all proxy setup code in your backend. Only thing needed is to add this one setting in your react app package.json.