Problem wiring a nodejs express back-end with a reactjs front-end - node.js

Question

I am trying to put together a reactjs Dashboard and wire it up with a Nodejs back-end. I am currently trying to validate a jwt token. when I do it using a Postman app, its working fine. but when I try it using my reactjs form, its not happening. please help me find the problem in my code. I am not an experienced developer. I am kind of a newbie to both nodejs and reactjs.
Any help will be highly appreciated.
I will try to post all the relevant code and some snapshots below.
//reactjs code calling this function on a button submit
//verify user
onVerify = event => {
let databody = localStorage.getItem("jwtToken");
event.preventDefault();
console.log(databody);
fetch("http://localhost:8000/api/auth/me", {
method: "get",
headers: {
"x-access-token": databody
}
})
.then(res => {
if (res.ok) {
return res.json();
} else {
throw new Error("Something went wrong with your fetch");
}
})
.then(json => {
console.log(json.token);
});
};
Nodejs express backend code
//app.js
var express = require("express");
var db = require("./db");
var Cors = require("cors");
var app = express();
app.use(Cors());
var UserController = require("./user/UserController");
app.use("/users", UserController);
var AuthController = require("./auth/AuthController");
app.use("/api/auth", AuthController);
var WorkInvenController = require("./auth/WorkInvenController");
app.use("/api/workinven", WorkInvenController);
module.exports = app;
//AuthController.js
router.get("/me", function(req, res) {
console.log(req.headers);
var token = req.headers["x-access-token"];
if (!token)
return res.status(401).send({ auth: false, message: "No token provided." });
jwt.verify(token, process.env.secret, function(err, decoded) {
if (err)
return res
.status(500)
.send({ auth: false, message: "Failed to authenticate token." });
User.findById(decoded.id, { password: 0 }, function(err, user) {
if (err)
return res.status(500).send("There was a problem finding the user.");
if (!user) return res.status(404).send("No user found.");
res.status(200).send(user);
});
});
});
terminal output from the backend when posted using Postman
terminal output from the backend when posted using reactjs from
browser error attached below

Answer 1

as i can see its a "rejection error"
you can just add .catch() and handle the error that is being thrown.
onVerify = event => {
let databody = localStorage.getItem("jwtToken");
event.preventDefault();
console.log(databody);
fetch("http://localhost:8000/api/auth/me", {
method: "get",
headers: {
"x-access-token": databody
}
})
.then(res => {
if (res.ok) {
return res.json();
} else {
throw new Error("Something went wrong with your fetch");
}
})
.then(json => {
console.log(json.token);
}).catch(error=>{
//handle the error in here may be
console.log(error)
});
};
sometime we wrote some sort of wrapper as well to handle errors:
fetch(<url>, {
<headers>,
<options>
})
.then(this._checkStatus)
.then(response => response.json());
_checkStatus(response) {
if (response.status >= 200 && response.status < 300) {
// Success status lies between 200 to 300
return response;
} else {
//here handle the error may be.
var error = new Error(response.statusText);
console.log(error);
}
}
so in your case, when the error coming its not handled , as there no .catch found, its throwing unhandled rejection error.
you can look at the above methods and follow any of them , also let me know if you are still facing issue with this.

Answer 2

sorry that I didn't post the whole code up here, or else I am sure you guys would have figured it long time back. long story short..
the problem was with my token, I accidentally set the expiresIn to 60 thinking that it was 60 minutes instead of 60 * 60. so the token was expiring every next minute.
Now after setting the token expiry to "24h" everything seems working good..
thanks a lot for you help guys.