Mi aplicación funcionaba perfectamente bien en el host local, pero una vez que la implementé en Heroku, obtuve este error:
Cuando hago console.log(response.data) en el lado del cliente, recibo esta cadena en lugar de res.json con mi información de usuario:
"<!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="Sitio web creado con 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">Necesita habilitar JavaScript para ejecutar esta aplicación.< div id="raíz">"
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, }); });Un amigo me ayudó a resolver.
Tenía estas líneas de código en mi servidor, pero tenía un pequeño error tipográfico y también necesitaba reorganizar las ubicaciones en las que se encontraban.
Comienzo de la aplicación del servidor: app.use(express.static(path.join(__dirname, "build")));
Fin de la aplicación del servidor:
app.get("*", (req, res) => { res.sendFile(path.join(__dirname, "build", "index.html")); });Mi aplicación implementada ahora funciona completamente.