Why is response.data an html string instead of json object? node.js, express.js, react-CodePudding

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,
  });
});

CodePudding user response：

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.