Tengo un problema con un proyecto hecho en React y consumiendo una API hecha en node desde un servidor usando Axios para tratar de hacer login.
El error se da cuando intento hacer peticiones GET a la API desde un origen externo, el navegador me arroja un error 401 (Unauthorized), si la api que se encuentra en el servidor 187:3000 recibe peticiones GET desde localhost por ejemplo, o desde otro servidor (el front está en un servidor 194:5173) arroja el error 401, pero si el front se despliega desde el mismo servidor donde está la API, entonces las peticiones se reciben sin problemas.
Este es el código de las rutas de la API:
index.js
const path = require("path");
const express = require("express");
const authRouter = require("./authRouter");
const apiRouter = require("./apiRouter");
const bodyParser = require("body-parser");
const cookieParser = require("cookie-parser");
const auth = require("../middleware/auth");
const {
changeSubscriptionStatus,
} = require("../controllers/subscriptionController");
const mtto = false;
module.exports = function (app) {
//SOLUCION CORS
app.use(function (req, res, next) {
// Website you wish to allow to connect
res.setHeader("Access-Control-Allow-Origin", "http://10.10.251.194:5173");
// Request methods you wish to allow
res.setHeader(
"Access-Control-Allow-Methods",
"GET, POST, PUT, PATCH, DELETE"
);
// Request headers you wish to allow
res.setHeader(
"Access-Control-Allow-Headers",
"Origin, X-Requested-With, Accept, Content-Type, Access-Control-Request-Method, Authorization, X-Auth-Token, Cookie"
);
// Set to true if you need the website to include cookies in the requests sent
// to the API (e.g. in case you use sessions)
res.setHeader("Access-Control-Allow-Credentials", true);
// Pass to next layer of middleware
next();
});
authRouter.js
const express = require("express");
const authRouter = express.Router();
const authController = require("../controllers/authController");
const apiErrorHandler = require("../middleware/apiErrorHandler");
const auth = require("../middleware/auth");
authRouter.get("/", auth.jwt, authController.userInfo);
authRouter.post("/", authController.login);
authRouter.put("/", authController.resetPassword);
authRouter.delete("/", auth.jwt, authController.logout);
authRouter.put("/profile", auth.jwt, authController.editUser);
authRouter.get("/logout", authController.logout);
authController.js
const passport = require("passport");
const ApiError = require("../util/ApiError");
const validator = require("validator");
const User = require("../models/user");
const notMissing = require("../util/notMissing");
const jwt = require("jsonwebtoken");
const login = (req, res, next) => {
passport.authenticate("local", (err, user, info) => {
if (err) return next(err);
if (!user) return next(info);
res.cookie("jwt", user.jwtToken());
let accounts = { 30: "invited", 40: "admin", 100: "sysadmin" }; //solis
User.findByIdAndUpdate(
{ _id: user.id },
{ $set: { last_login: new Date() } }
).then();
res.json({
ok: true,
typeAccount: accounts[user.position],
token: user.jwtToken(),
});
})(req, res, next);
};
Este es el código del Front:
ctCloudApi.js
import axios from "axios";
let url = "http://10.10.251.187:3000";
const ctCloudApi = axios.create({
baseURL: url,
withCredentials: true,
});
useAuthStore.js
import { useDispatch, useSelector } from "react-redux";
import { ctCloudApi } from "../apis";
import {
onChecking,
onLogin,
} from "../redux";
export const useAuthStore = () => {
const dispatch = useDispatch();
const startLogin = async ({ email, password }) => {
try {
// Se llama a la api
const resp = await ctCloudApi.post("/auth", { email, password });
console.log(resp);
const token = resp.data.token;
if (resp.data.ok) {
dispatch(onChecking()); // Se llama a la accion para volver todos los estados por defecto
const resp = await ctCloudApi.get(`/auth`, {
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
});
if (resp.status === 200) {
dispatch(onLogin(resp.data));
return;
}
}
} catch (error) {
dispatch(
setMessage({
type: "login",
msg: error.message,
})
);
setTimeout(() => {
dispatch(clearMessage());
}, 2000);
return;
}
};
}
Este mensaje de error es el que recibe:
Aquí se muestran las dos peticiones que se mandan, la del método POST que se efectúa sin problemas, y la del método GET que es la que arroja el error 401:
Necesito ayuda para poder darle solución a este problema, ¿qué me recomiendan hacer?
undefined