1

Buen día, Estoy trabajando con un login con node.js / expressJs y necesito mandar uno valor al servidor a través fetch sin embargo no logro hacer que el servidor los reconozca, por lo que veo ni siquiera los recibe.

Tengo un formulario en el HTML/PUG, el cual captura los datos de usuario y contraseñas para mandarlos al servidor y estos sean validados, sin embargo también requiero enviar un valor alojado en el sessionstorage, para esto me apoyo de un JS el cual esta enlazado en el mismo HTLM.

HTML / Pug

    section.container
    div.login
        form( id="login", action="/valCreden/" method="POST")
            //- form(action="/valCreden/"+session, method="post")
            input(type="text" name="usuario" placeholder="Ingrese su correo" required)
            input(type="password" name="contraseña" placeholder="Ingrese su contraseña" required)
            //- input(type="hidden", name="session" id="token" )
            input(type="submit",  value="Iniciar Sesion")
        a(href="/registrarse", ) Registrarse
    script(src="../js/app.js")

JS

Del lado del servidor, tengo un eventListener en el cual en el momento que se presenta el evento submit, activa la función encargada de hacer el envío a través de fetch.

var login = document.getElementById("login");
login.addEventListener( "submit", myFunction );


function myFunction(){
   localStorage.setItem('token2', 'valorToken2');
   var session = localStorage.getItem( 'token' );
   console.log( `Linea 9 - El token es: ${session}` );
   console.log(session);
   var usu = document.getElementsByName( 'usuario' ).value;
   var pas = document.getElementsByName( 'contraseña' ).value;

   // FETCH:
   var myHeader = new headers();
   var requ = {
      method : 'POST',
      headers : myHeader,
      usuario : usu,
      contraseña : pas,
      sesi : session
   };
  var myRequest = new Request( 'http://localhost:3000/valCreden/', requ );

   fetch( myRequest, {credentials: 'include'} ) 
       .then( ( res )=>{
           if ( res.ok ){
               console.log( `Respuesta de red OK: ${res}` )
           }
       } )
       .catch( (error)=> { console.log( error ) } );
  };

Como pueden ver el fetch envía a través de un objeto todos los datos del formulario como el valor alojado en el sessionstorage.

Controlador en ExpressJs

// Funcion que valida las credenciales ingresadas.
MovieController.valCreden = (req, res, next)=>{
  let credenciales = {
      usuario : req.body.usuario,
      contraseña : req.body.contraseña,
      session : req.body.sesi
  }
MovieModel.valCreden( credenciales, (err, data)=>{
    console.log( ` Linea 58 - El token es: ${credenciales.session}` )

Creo que el problema proviene del JS, por alguna razón este no se ejecuta ya que en la consola no me aparecen los console.log que he escrito, sin embargo tampoco se si hay algún error en el la funcion fetch.

Espero puedan ayudarme. Saludos cordiales.

1
  • No he visto el código a detalle, pero a primera vista no estás previniendo el submit por defecto del formulario, el cual incurre en una petición HTTP normal (con redirección), haciendo posible que el código ajax nunca se ejecute. Agrega como parámetro del listener el evento y como primera línea ejecuta e.preventDefault().
    – gugadev
    Commented el 25 may. 2019 a las 14:22

1 respuesta 1

2

Como @gugadev te comenta, debes prevenir el comportamiento por defecto del elemento tipo submit, porque es muy probable que la petición fetch no se realice. Sin embargo, además de dicho detalle, tienes otros problemas al enviar los datos desde el cliente, e imagino que también tienes problemas en el lado del servidor, al manejar los datos recibidos.

PROBLEMA

Se desea enviar datos a un servidor Node/Express, usando el método fetch mediante una solicitud tipo POST.

SOLUCIÓN

Para lograr el objetivo vamos a realizar algunos cambios en nuestros métodos y la forma en la que usamos los mismos.

El primer cambio lo haremos en la plantilla pug, el cambio es sutil pero muy importante. En tu plantilla usas document.getElementsByName, y luego intentas capturar el valor devuelto por value. Sin embargo, según la documentación, dicho método devuelve una lista de nodos cuyo atributo name coincida con el valor que pasamos a nuestro método. Por lo tanto, cuando intentas hacer document.getElementsByName('user').value, el resultado será: undefined, ya que value no está definido en la lista de nodos.

Dicho lo anterior, cambiaremos los atributos name por atributos id en nuestra plantilla, para poder usar de esta manera el método document.getElementById

index.pug

html
  head
    title= title
  body
    h1= message
    section.container
      div.login
        form( id="login", action="/valCreden/" method="POST")
          input(type="text" id="user" placeholder="email" required)
          input(type="password" id="password" placeholder="password" required)
          input(type="submit",  value="Sign in")
        a(href="/registrarse", ) Sign Up
      script(src="/js/app.js", type="text/javascript")

Ahora haremos los cambios en nuestro archivo Javascript.

Un cambio importante es la forma en la que implementas las opciones que pasas el objeto request, también debemos prevenir que el elemento submit realice el envío de los datos del form, ya que eso evitaría que se ejecutara nuestra solicitud fetch. Adicionalmente, cambiaremos la forma de capturar los valores de los elementos input, usando getElementById.

opciones

const options = {
    method: 'POST',
    headers: myHeaders,
    body: new URLSearchParams({
      'user': user,
      'password': password,
      'session': session
    })
}

Como puedes apreciar usaremos el atributo body y le pasaremos como valor un objeto del tipo URLSearchParams, el cual contendrá los valores (par clave: valor) de los datos.

En la documentación de Request, nos indica claramente el tipo de objetos aceptados por el atributo body.

app.js

const login = document.getElementById('login');

login.addEventListener('submit', (event) => {
  event.preventDefault(); // <- Se previene el comportamiento por defecto del elemento
  localStorage.setItem('token', 'value of token');
  const session = localStorage.getItem('token');
  const user = document.getElementById('user').value; // <- Usamos getElementById
  const password = document.getElementById('password').value;
  let myHeaders = new Headers();

  const options = {
    method: 'POST',
    headers: myHeaders,
    body: new URLSearchParams({
      'user': user,
      'password': password,
      'session': session
    }),
  }

  let myRequest = new Request('http://localhost:3000/valCreden/', options);
  fetch(myRequest, {credentials: 'include'})
    .then((res) => {
      if(res.ok) {
        console.log('Ok');
        return res.json(); // <- parseamos el response y lo devolvemos a nuestra función
      }

    })
    .then((resParsed) => {
      console.log(resParsed); // <- mostramos los datos recibidos, luego de ser parseados
    })
    .catch((error) => {
      console.log(error);
    });
});

Por último haremos cambios en nuestro servidor.

Para este ejemplo usaré una implementación mínima de Express con los elementos básicos para que todo funcione de acuerdo a lo que necesitamos.

Uno de los cambios importantes, es usar un parser para poder usar el objeto body de nuestra solicitud. Express 4.16.0 y superior incluye los métodos json() y urlencoded(), los cuales nos sirven para capturar y parsear los datos del body de la solicitud. Para usarlos debemos escribir lo siguiente:

app.use(express.json());
app.use(express.urlencoded({
  extended: true
});

Luego, para capturar los datos que vienen en el cuerpo de nuestra solicitud haremos lo siguiente:

let data = req.body;

Así en el objeto data tendremos los valores que han sido enviados usando el método fetch en el cuerpo de dicha solicitud.

index.js

'use strict';
const express = require('express');
const app = express();

app.set('view engine', 'pug');
app.use(express.static(__dirname + "/"));
app.use(express.json());
app.use(express.urlencoded({
  extended: true
}));

app.get('/', (req, res) => {
  res.render('index', {title: 'Using Fetch with Node/Express', message: 'Try Me!'});
});

app.post('/valCreden', (req, res) => {
  let data = req.body;
  console.log(data);
  res.status(200).json(data); // <- enviamos de regreso los datos recibidos
});

app.listen(3000, (err) => {
  if(err) console.log(err);
  console.info('App started');
});

Como puedes apreciar, los cambios son sutiles, pero importantes.

De esta forma puedes enviar los datos que necesites a tu servidor y trabajar con ellos.

Una captura del resultado en el servidor:

Resultado en servidor

Aquí una captura del resultado en el navegador con la consola abierta para ver la respuesta del servidor:

Resultado en el navegador

Espero que sea la respuesta que esperabas y logres solucionar el problema.

1
  • 1
    Antes que nada quiero agradecerte tu excelente respuesta, Eres de los pocos usuarios que he visto que dan una respuesta sumamente bien estructurada. Es exactamente lo que necesitaba. Es bueno ver que en esta comunidad hay gente que realmente se toma la molestia para ayudar a otros developers. Te agradezco la ayuda.
    – Antuanct
    Commented el 28 may. 2019 a las 2:08

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.