Estoy usando las funciones de netlify para enviar un correo electrónico desde la interfaz y funciona bien... ya que envía el correo electrónico.
Sin embargo, en el lado del cliente (navegador) no puedo obtener ninguna respuesta. Necesito una respuesta básica que me permita hacer un if (status==="success") displayMessage() pero parece que no puedo obtener ninguna respuesta en el navegador.
Recibo este mensaje Uncaught (in promise) SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data Sin embargo, al enviar la solicitud a través de POSTMAN, recibo una respuesta 'Correo electrónico enviado con éxito', que es la parte del cuerpo de la devolución de llamada respuesta.
Aquí está la función que estoy usando en .netlify/functions/sendMail
const nodemailer = require("nodemailer"); exports.handler = function (event, context, callback) { const mailConfig = { host: "smtp.mailgun.org", port: 465, secure: true, auth: { user: process.env.MAILGUN_USER, pass: process.env.MAILGUN_PASSWORD, }, }; const transporter = nodemailer.createTransport(mailConfig); transporter.verify((error, success) => { if (error) { console.log(error); } else { console.log("Ready to send emails"); } }); const messageData = JSON.parse(event.body); const { email, name, mobile, message, subject, recipient } = messageData; console.log(messageData); const mailOptions = { from: email, to: recipient, subject: subject, text: message, }; transporter.sendMail(mailOptions, (error, success) => { if (error) { console.log(error); callback(error); } else { console.log("email sent"); callback(null, { statusCode: 200, body: "Email sent successfully", }); } }); };y en el lado del cliente tengo esto
const form = document.querySelector("#message"); const submitMessage = (event) => { event.preventDefault(); const formData = new FormData(form); formData.append("recipient", "testing@gmail.com"); formData.append("subject", "Submission from website"); const messageData = Object.fromEntries(formData); console.log(messageData); const url = ".netlify/functions/sendMail"; const options = { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(messageData), }; fetch(url, options) .then((response) => response.json()) .then((data) => console.log(data)); }; form.addEventListener("submit", submitMessage); en la solicitud de recuperación, esperaba que los data me dieran una respuesta para poder activar alguna acción para mostrar un mensaje de éxito.
¿Alguien puede aconsejarme qué estoy haciendo mal aquí?
Me di cuenta de lo que estaba haciendo mal y aquí está la solución en caso de que alguien más enfrente los mismos problemas.
En la devolución de llamada de la función netlify estaba enviando el cuerpo como texto
callback(null, { statusCode: 200, body: "Email sent successfully", });pero en la solicitud de búsqueda del lado del cliente lo estaba tratando como json
fetch(url, options) .then((response) => response.json()) .then((data) => console.log(data)); Entonces, básicamente, podría usar una response.text() en lugar de una response.json() para la solicitud de búsqueda o usar JSON.stringify y devolver un objeto JSON desde la devolución de llamada. Preferí la opción JSON.stringify como se muestra a continuación para la devolución de llamada
callback(null, { statusCode: 200, body: JSON.stringify({ status: "success", message: "Email sent successfully", }), });