Lado Cliente (Formulario)
import Axios from 'axios';
import React, {useState} from 'react';
const Contact = (e) => {
const url = '/text-mail'
const [Nombre, setNombre] = useState('');
const [Asunto, setAsunto] = useState('');
const [Email, setEmail] = useState('');
const [Message, setMessage] = useState('');
const SubmitForm = (e) => {
e.preventDefault();
//console.log({ Nombre,Asunto,Email,Message });
Axios.post(url,{
data: Nombre,Asunto,Email,Message,
headers: {'Content-Type': 'multipart/form-data' }
})
.then(function (res) {
//handle success
console.log(res.data);
})
}
return(
<>
<h1 className='flex justify-center text-3xl transform translate-y-28'>Private Contact</h1>
<form onSubmit={(e) => SubmitForm(e)} className='transform translate-y-28' autoComplete='off'>
<div className='FormCenter'>
<input type='text' className='FormData' onChange={e => setNombre(e.target.value)} name='Nombre' placeholder='Full Name' required/>
</div>
<div className='FormCenter'>
<input type='text' className='FormData' onChange={e => setAsunto(e.target.value)} name='Asunto' placeholder='Asunto' required/>
</div>
<div className='FormCenter'>
<input type='text' className='FormData' onChange={e => setEmail(e.target.value)} name='Email' placeholder='[email protected]' required/>
</div>
<div className='FormCenter'>
<textarea className='h-32 FormData' onChange={e => setMessage(e.target.value)} name='Message' placeholder='Message' row='5' required/>
</div>
<div className='FormCenter'>
<input type='submit' className='cursor-pointer Submit' name='Submit' value='Contact'/>
</div>
</form>
</>
)
}
export default Contact;
express con Nodejs
const express = require("express");
const bodyParser = require('body-parser');
const nodemailer = require('nodemailer');
const app = express();
//importando
require('dotenv/config');
// Parse incoming requests data (https://github.com/expressjs/body-parser)
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
const route = express.Router();
const port = process.env.PORT || 5000;
app.use('/v1', route);
app.listen(port, () => {
console.log(`Server listening on port ${port}`);
});
const transporter = nodemailer.createTransport({
port: 587,
host: 'smtp.ethereal.email',
auth: {
user: '[email protected]',
pass: 'S9Y5yYM6ZA5n4u2F2q',
},
});
route.post('/text-mail', (req, res) => {
const {Nombre,Asunto,Email,Message} = req.body;
const mailData = {
from: '[email protected]',
to: '[email protected]',
subject: 'enviado desde un formulario',
text: 'Recibir' ,
html: `<h1>Contact Details</h1>
<p>Nombre: ${Nombre}</p>
<p>Asunto: ${Asunto}</p>
<p>Email: ${Email}</p>
<p>Message: ${Message}</p>
`
};
transporter.sendMail(mailData, (error, info) => {
if (error) {
return console.log(error);
}
res.status(200).send({ message: "Mail send", message_id: info.messageId });
});
});
no entiendo en donde estoy fallando al hacer esto. me pueden orientar un poco en este caso nunca antes había usado Nodemailer. estoy intentando enviar un email a través de un sencillo formulario. De alguna forma antes de que axio pueda enviar los datos recibidos del formulario a backend me salta el error -> ERROR: Uncaught (in promise) Error: Request failed with status code 404 arriba anexe el código del lado donde tengo el formulario y el server express