1

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

1 respuesta 1

-1

Generalmente, este error :

ERROR: Uncaught (in promise) Error: Request failed with status code 404

se produce cuando la URL / ubicación proporcionada dentro del método POST no es correcta. Así que verifique la URL / ubicación nuevamente y corríjala.

5
  • dentro del metodo POST del <form onSubmit={(e) => SubmitForm(e)} > </form> <- te refieres a esta parte de aqui? o aparte de ello hay que ponerle un action='' ?
    – John
    el 5 jul. 2021 a las 22:59
  • no, cuando da ese problema es porque probablemente no llegue ala ruta del post/get/delete/update no es la correcta, pero si llega al endpoint entonces seria de revisarlo mas de serca el 5 jul. 2021 a las 23:31
  • también puede ser por esto: const route = express.Router(); y que tu endpoint sea asi route.post en ves de eso ocupa app.post el 5 jul. 2021 a las 23:37
  • corregí lo comentado. ahora me salió un error net::ERR_SSL_PROTOCOL_ERROR ?
    – John
    el 5 jul. 2021 a las 23:42
  • Esto creo q te puede ayudar con tu problema: stackoverflow.com/questions/54223253/… el 5 jul. 2021 a las 23:51

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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