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

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

Contents hide

Answers:

Method 1

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating