My app was running perfectly fine on the localhost, but once I deployed to Heroku I got this bug:
When I console.log(response.data) in the client side I receive this string instead of the res.json with my user info:
"<!doctype html><html lang="en"><meta charset="utf-8"/><link rel="icon" href="/climbing.png"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/>Climber Nation<script defer="defer" src="/static/js/main.56943839.js"><link href="/static/css/main.a3875cba.css" rel="stylesheet">You need to enable JavaScript to run this app.<div id="root">"
app.use(
cors({
headers: {
"Content-Type": "application/json",
"Access-Control-Allow-Origin": "*",
},
credentials: true,
origin: ["https://climber-nation.herokuapp.com/"],
methods: ["GET", "POST"],
})
);
//VALIDATE AUTHENTICATION TOKEN
const authenticateToken = (req, res, next) => {
try {
const token = req.headers["authorization"];
if (token == null) {
return res.sendStatus(401);
} else {
jwt.verify(token, process.env.ACCESS_TOKEN_SECRET, (error, decoded) => {
if (error) {
return res.sendStatus(403);
} else {
req.user = decoded;
return next();
}
});
}
} catch (error) {
console.log(error);
return res.status(400).json({ error: error });
}
};
//AUTHENTICATION
app.get("/authentication", authenticateToken, async (req, res) => {
const username = req.user.username;
const allUserInfo = await db("users").select("*").where("username", username);
const image = await db("images")
.innerJoin("users", "images.image_id", "users.user_id")
.select("filename")
.where("username", username);
const imageFile =
"https://climber-nation.herokuapp.com/images/" + image[0]?.filename;
res.json({
allUserInfo: allUserInfo[0],
imageFile: imageFile,
});
});
A friend helped me to solve.
I had these lines of code in my server, but had a small typo and also needed to rearrange the locations they were in.
Beggining of server app:
app.use(express.static(path.join(__dirname, "build")));
End of server app:
app.get("*", (req, res) => {
res.sendFile(path.join(__dirname, "build", "index.html"));
});
My deployed app is now fully working.