0

Estoy intentando enviar los datos de un formulario a través de fetch, necesito enviar estos valores al servidor (node.js / expressJs) pero no lo consigo, el problema que me arroja la cnosola es algo relacionado con los headers.

Los valores de email y contraseña los capturo con un formulario HTML y los envío al servidor. Envío además el valor de un token almacenado en el local storage, esto con ayuda de javascript.

<form method="POST" action="http://localhost:3000/login" enctype="text/plain">

    <div class="form-label-group m-3">
        <input type="email" id="inputEmail" placeholder="Correo Electrónico">
    </div>
     
    <div class="form-label-group m-3">
        <input type="password" id="inputPassword" placeholder="Contraseña">
    </div>

    <div class="row justify-content-center">
        <button id="botonIngreso" type="submit">Iniciar Sesion</button>
    </div>                   
</form>

Con javascript activo el escuchador de eventos sobre el boton para ejecutar la función que llama al fetch:

    botonIngreso.addEventListener ("click", (evento)=>{
    evento.preventDefault();
    let botonIngreso = document.getElementById("botonIngreso");
    let inputEmail = document.getElementById("inputEmail");
    let inputPassword = document.getElementById("inputPassword");


    localStorage.setItem('token', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJub21icmVVc3VhcmlvIjoiSW50ZW50bzMiLCJhcGVsbGlkb1VzdWFyaW8iOiJpbnRlbnRvMyIsImVtYWlsVXN1YXJpbyI6Im51ZXZvQHByb3llY3RvLmNvbSIsImNvbnRyYXNlbmEiOiIxMjM0NSIsImlkX3RpcG9Sb2wiOjEsImlhdCI6MTYwNDk3ODU4MX0.m4DVs_UCloN44xTPzfI9fxnS0d_KarDKyiBDnDvDQQ8');
    var token = localStorage.getItem( 'token' );
    var usuario = inputEmail.value;
    var contrasena = inputPassword.value;

    const peticion = {
        method: 'POST',
        headers: new Headers({
            "Content-Type": "application/json"
        }),
        body: new URLSearchParams({
          'user': usuario,
          'password': contrasena,
          'token': token
        })
    }

  let miPeticion = new Request( "http://localhost:3000/login", peticion );

   fetch(miPeticion, {credentials: 'include'}) 
       .then( (respuesta)=>{
           console.log(respuesta)
           if (respuesta.ok){
               return respuesta.json()
           }
       }).then((respuestaJson)=>{
            console.log(respuestaJson)
       }).catch((error) => {
        console.log(error);
      });
  });

En Express valido el token:

        const validarToken = (req, res, next)=>{
    try {
        const token = req.headers.authorization;
        const token = req.body.token;
        console.log(token.split(' ')[1])
        JWT.verify(token.split(' ')[1], process.env.secreto);
        next();
    } catch (error) {
        console.log(error);
        res.status(401).json('token no válido');
    }
}

y consulto el endpoint:

        conexiones.app.post("/login", validacionesUsuarios.usuarioExistenteIngreso, (req, res)=>{
    
    const {emailUsuario, contrasena} =req.body;
    conexiones.sequelize.query("SELECT * FROM usuarios WHERE emailUsuario=? AND contrasena=?",
    {
        replacements: [emailUsuario, contrasena],
        type:conexiones.sequelize. QueryTypes. SELECT
    }).then((respuesta)=>{
        if(respuesta.length>0){
            console.log(respuesta)
            let usuario = respuesta[0]

            const payload = {
                nombreUsuario : usuario.nombreUsuario,
                apellidoUsuario : usuario.apellidoUsuario,
                emailUsuario: usuario.emailUsuario,
                contrasena: usuario.contrasena,
                id_tipoRol: usuario.id_tipoRol,
            };
            const Token = JWT.sign(payload, process.env.secreto);

            res.status(200).json(Token)

        }else{
            res.status(400).json("No tienes axeso a la plataforma")
        }
    })
    .catch((error)=>{
        console.log(error);
        res.status(500).json(error)
    });
});

Les agradezco mucho si me pueden colaborar, llevo varias horas con esto y no lo he logrado!!

1 respuesta 1

0

Estas usando una mezcla de URLEncoded body con application/json Content-Type

Tenés que cambiar ÙRLSearchParams(...) por JSON.stringify(...)

Aparte del lado del servidor tenes que usar el modulo body-parser para parsear el body

const { json } = require("body-parser");
app.use(json())

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.