Cuando envío datos desde el frontend, recibo nulo en el backend. Estoy enviando fechas y URL de datos de 2 cadenas, por lo que no creo que necesite usar middleware adicional para recibir los valores.
Interfaz:
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { e.preventDefault() const today = new Date(); const date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate(); const formData = new FormData(); formData.append('url', url); formData.append('date', date); console.log(url, date); fetch('http://localhost:5000/shortUrls', { method: 'post', body: formData }) .then(response => response.json()) .then(data => { if (data.insertedId) { alert('Link Added') setLoadings(true) } }) .catch(error => { console.error('Error:', error); }); }back-end:
// middleware const app = express(); app.use(cors()) app.use(express.json()) app.post('/shortUrls', async (req, res) => { const uniqueUrl = shortId({ url: req.body.url }) console.log(req); const details = { short: uniqueUrl, full: req.body.url, clicks: 0, date: req.body.date, } const result = await AffiliateLinksCollection.insertOne(details) res.json(result) })está vacío porque en el servidor tiene un analizador json , pero está enviando una solicitud multipart/form-data , y no hay ningún analizador para procesarla.
como no está cargando un archivo, la forma más fácil sería enviar una solicitud json :
e.preventDefault() const today = new Date(); const date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate(); // use object const formData = {url, date}; console.log(url, date); // post json fetch('http://localhost:5000/shortUrls', { method: 'post', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(formData) }) si desea utilizar FormData , debe incluir un analizador en el servidor. por lo general, esto es multer , pero como no está cargando un archivo, use body-parser
app.use(bodyParser.urlencoded({ extended: true })); sin embargo, como FormData envía datos como multipart/form-data , bodyParser no puede analizarlos, por lo que debe convertirlos en una cadena codificada en URL con URLSearchParams
fetch('http://localhost:5000/shortUrls', { method: 'post', body: new URLSearchParams(formData) })