2

Estoy haciendo una aplicación de tareas solo por practicar, donde las registro y muestro correctamente, el problema surge al intentar eliminar una por el metodo POST enviando por ajax el id de la tarea a express, resulta que hago un req.body para mostrar los datos que llegan por POST pero este me retorna un objeto vacio.

A esta funcion le paso por parametro el id de la tarea a eliminar.

let eliminar = (id) => {
       let data = new FormData();
       data.append("id", id);

        ajax("POST", "/eliminar", data, (e) => {
            let respuesta = Boolean(e.target.response);
            if (respuesta) {
                mostrar();
            } else {
                alert("Error al eliminar elemento");
            }
        });
    };

   

Funcion ajax.

 let ajax = (metodo, url, datos, cb) => {
                let xhr = new XMLHttpRequest();
                xhr.open(metodo, url);
                xhr.addEventListener("load", (e) => {
                    cb(e);
                });
                xhr.send(datos);
    
            }

Esta es la ruta donde no llegan los datos enviados.

const express = require("express");
const router = express.Router();
const tareas = require("./../tareas.js");

router.post("/eliminar", (req, res) =>{
    console.log(req.body); //imprimo los datos que deberian llegar pero me devuelve un objeto vacio
});

Aquí inicia el servidor.

const express = require("express");
const app = express();
const path = require("path");


app.set("port", process.env.PORT || 3000);
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "ejs");

app.use(express.static(path.join(__dirname, "public")));
app.use(express.json());
app.use(express.urlencoded({extended: true}))

app.use("/", require("./routes/index.js"));


app.listen(app.get("port"), () =>{
    console.log("Servidor iniciado en puerto: " + app.get("port"))
});

Nota: No estoy usando body-parser porque a partir de la version 4.16.x de express ya viene como dependencia.

4
  • Deberias indicar que es datos (si un objeto, un formData, una cadena, ...). Aunque, la verdad, no me esta siendo fácil encontontrar que cabecera Content-Type coloca el navegador por defecto O_o
    – Trauma
    el 26 ago. 2020 a las 15:52
  • Hola @Trauma cambie datos por data y lo transforme en un formData pero aun así sigue devolviendo un objeto vació, ya edité el código de la pregunta. el 26 ago. 2020 a las 16:06
  • 1
    ¿Puedes depurar la cabecera de solicitud que recibes en tu servidor Express? Haz un console.log(req.headers); y verifica que estén completas. Deberías recibir una de Content-Type: 'application/x-www-form-urlencoded' ya que estás enviando datos con FormData. Si no la recibes, debes establecerla usando xhr.setRequestHeader(). Comenta el resultado. Saludos el 26 ago. 2020 a las 17:19
  • Hola @MauricioContreras, hice el console.log(req.headers) y me imprimio: 'content-type': 'multipart/form-data, hice el cambio en xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded") y volvi a imprimir y ahora si me cambió el Content-Type, luego hice el req.body y me imprime ------WebKitFormBoundaryyt9Wtp5fZa6Bll34\r\nContent-Disposition: form-data; name': '"id"\r\n\r\n3\r\n------WebKitFormBoundaryyt9Wtp5fZa6Bll34--\r\n, pero intenté hacer el req.body.id y me devuelve undefined el 26 ago. 2020 a las 18:09

1 respuesta 1

2

PROBLEMA

El problema está en que un objeto Formdata solo está diseñado para ser enviado con el formato "multipart/form-data". Por lo tanto, para poder recibirlo en el servidor de Express no podremos hacerlo con el formato propuesto en mi comentario: x-www-form-urlencoded.

SOLUCIÓN

Te presento dos posibilidades:

  1. Usar multer, un popular middleware para NodeJS cuyo propósito es tratar con datos en formato multipart/formdata.
  2. Enviar los datos como cadena key=value con formato application/x-www-form-urlencoded.

Usando multer

Debemos instalar el módulo desde npm usando:

npm install --save multer@latest

Luego podemos usar el middleware none(), ya que no estamos recibiendo archivos, sólo datos. Por ejemplo:

const express = require('express');
const multer = require('multer');

const app = express();

const router = express.Router();
const upload = multer();

app.use(express.json());
app.use(express.urlencoded({extended: false}));
app.use(upload.none()); // <- aqui estoy usando multer

router.route('/eliminar')
.post((req, res, next) => {
  console.log(req.body);
  return res.status(200).json({
    headers: req.headers,
    body: req.body
  });
});

app.use(router);

app.listen(3001, () => {
  console.log('listening on port 3001');
});

Con esto ya tendrás el objeto req.body con los datos que necesitas. El código de tu cliente no cambia.

Usando x-www-form-urlencoded

La otra opción es cambiar la forma en que envías los datos, en particular el cambio es solamente del lado cliente:

let eliminar = (id) => {
  let data = `id=${id}`; // <= una cadena con el formato key=value
  ajax("POST", "/eliminar", data, (e) => {
    //...
  });
};

let ajax = (metodo, url, datos, cb) => {
  let xhr = new XMLHttpRequest();
  xhr.open(metodo, url);
  xhr.addEventListener("load", (e) => {
    cb(e);
  });
  // establezco la cabecera content-type
  xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
  xhr.send(datos);
}

Nótese que se usa una cadena con un sólo par key=value, si se necesita enviar más de un par de valores lo puedes hacer usando como separador el símbolo &, por ejemplo:

let data = `id=${id}&name=mauricio&lastname=contreras`;

Lo que devolverá en el objeto body lo siguiente:

{
  id: <valor>,
  name: 'mauricio',
  latsname: 'contreras'
}

Estoy usando una plantilla de cadena para incorporar valores dinámicos: ${<valor o expresión>}.

De esta forma tu servidor Express logrará ver los datos que envías en el cuerpo de la solicitud.

1
  • Excelente muchas gracias, utilice la segunda opción. el 26 ago. 2020 a las 20:08

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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