Estoy tratando de aprender XMLHttpRequests. Estoy tratando de enviar alguna información al servidor, pero cuando llega allí, el Objeto está vacío, como {} Ese setRequestHeader que comenté, si está dentro, el objeto se imprime correctamente, pero aparece un error que debe estar abierto en el navegador. PERO si lo pongo después de la instrucción open(), deja de funcionar nuevamente y el objeto llega vacío. También probé todo eso y también JSON.stringfy la variable antes de enviarla, pero tampoco funcionó.
//server.js const express = require('express'); const app = express(); const cors =require('cors') app.use(cors()) app.use(express.urlencoded({extended:true})) app.post('/frases', function(req, res) { console.log(req.body); const frase = new phrase(req.body); // console.log(frase); }) app.listen(3000, () => console.log('listening on 3000...')); //script.js var form = document.getElementsByTagName('form')[0]; const xhr = new XMLHttpRequest(); // xhr.setRequestHeader('Content-Type', 'application/json'); form.onsubmit = (e) => { e.preventDefault(); const thisName = form.elements[0].name; const thisValue = form.elements[0].value; const frase = {[thisName]:thisValue}; console.log(frase) xhr.open('POST', 'http://localhost:3000/frases'); xhr.send(frase); }; <!-- index.html --> <form action = "http://localhost:3000/frases" method="post"> <label for="frasefavorita"> Qual é a sua frase favorita? <input id= 'frase' type="text" name="frasefavorita"> <button id= 'send-frase' type="submit">Enviar</button> </form>req.body está vacío de forma predeterminada porque el cuerpo de la solicitud entrante no se lee de forma predeterminada. Necesita un middleware que coincida con el tipo de contenido entrante para leer ese cuerpo, analizarlo y colocar los resultados en req.body .
Y, en su llamada xhr, tiene que decidir qué tipo de contenido va a usar para enviar los datos, tiene que poner los datos en ese tipo de contenido y tiene que configurar ese encabezado de manera adecuada. Luego, podrá agregar el middleware correcto a su servidor para leer y analizar ese cuerpo y luego, y solo entonces, podrá acceder a él en req.body en su servidor.
Si iba a enviarlo como JSON, puede hacer esto en el cliente para configurar el tipo de contenido para JSON y formatear los datos como JSON:
form.onsubmit = (e) => { e.preventDefault(); const thisName = form.elements[0].name; const thisValue = form.elements[0].value; const frase = {[thisName]:thisValue}; const xhr = new XMLHttpRequest(); xhr.setRequestHeader("Content-Type", "application/json"); xhr.open('POST', 'http://localhost:3000/frases'); xhr.send(JSON.stringify(frase)); }; Luego, en su servidor, puede agregar este middleware antes de su controlador de ruta /frases :
// read and parse incoming JSON request bodies app.use(express.json()); Eso leerá y analizará los datos de tipo de contenido de la application/json provenientes de su llamada Ajax.
PD Le sugiero que use la interfaz fetch() para escribir código nuevo, no la API XMLHttpRequest. fetch() es mucho más fácil de usar y tiene un diseño más moderno (usando promesas).
Intente configurar el encabezado después de llamar a la función abierta
xhr.open('POST', 'http://localhost:3000/frases'); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.send(frase);