0

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: introducir la descripción de la imagen aquí

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: introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

Necesito ayuda para poder darle solución a este problema, ¿qué me recomiendan hacer?

4
  • Te aseguraste que el token que estas enviando hacia el endpoint es válido? Revisa que no sea undefined Commented el 5 ene. 2023 a las 18:11
  • Sí, el token que regresa no es undefined, de eso me aseguré. Commented el 5 ene. 2023 a las 18:15
  • Puede ser el token o bien la configuración CORS del lado de tu servidor, si estás restingiendo el origen de las peticiones a una url en especifico. Commented el 5 ene. 2023 a las 18:18
  • ¿Pero entonces qué configuré mal en CORS?, no recibo ningún mensaje de que la petición GET haya sido bloqueada por cors policy, ¿Cómo puedo saber si estoy restringiendo el origen de las peticiones del lado del servidor? Commented el 5 ene. 2023 a las 18:28

1 respuesta 1

0

Puede ser que el token no se esté renovando automaticamente. Si tienes una imagen de la api que consumes, en el auth puedes renovar el token, copiar pegarlo en el axios.

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.