es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Error: La solicitud falló con el código de estado 404, React, Axios.

06 Aug, 2023 Programación

He construido un formulario al que quiero poder enviar correos electrónicos, para hacer esto, he intentado seguir este tutorial de YouTube: https://www.youtube.com/watch?v=_3-By9QfFa0

Sin embargo, me encuentro con un problema donde estoy obteniendo el error en el título de la pregunta, que aparece en mi navegador web de la consola cuando intento enviar el formulario. Me doy cuenta de que el problema podría tener algo que ver con una de las rutas en algún lugar, pero simplemente no puedo resolverlo (a menos que sea algo completamente diferente).

schoolForm.js

const handleSubmit = async (e) => {
e.preventDefault();
try { // También intenté usar solo: “/send_mail” aquí como lo tengo en server.js pero no funcionó
await axios.post(“http://localhost:3000/send_mail”, {
name
});
}
catch (error) {
console.log(error);
}
}

server.js

const express = require(“express”);
const app = express();
require(“dotenv”).config();
const bodyParser = require(“body-parser”);
const cors = require(“cors”);
const nodemailer = require(“nodemailer”);

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.use(cors());

app.post(“/send_mail”, cors(), async (req, res) => {
let { text } = req.body;
const transport = nodemailer.createTransport({
host: “smtp-mail.outlook.com”,
port: 587,
auth: {
user: “someone@hotmail.com”,
pass: “password”
},
tls: {
rejectUnauthorized: false
}
});

await transport.sendMail({
from: “someone@hotmail.com”,
to: “someone@hotmail.com”,
subject: “subject”,
html: <p>${text}</p>
})

});

app.listen(4000, () => {
console.log(“El servidor está escuchando en el puerto 4000”);
});

Edit: El error que obtengo en el navegador:

Imagen del error: https://i.stack.imgur.com/ZIaqo.png

¿Hay alguien que pueda ayudarme a resolver este problema? ¡Cualquier ayuda sería muy apreciada!

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que el problema podría estar relacionado con la política de CORS (Compartir recursos de origen cruzado), que impide que el navegador realice una solicitud a un dominio diferente (en este caso, desde el frontend hasta el backend).

    Ya has habilitado CORS en tu backend utilizando el middleware cors, pero también debes asegurarte de que tu solicitud del frontend incluya las cabeceras necesarias para permitir CORS.

    Intenta agregar las siguientes cabeceras a tu solicitud axios.post:

    await axios.post("http://localhost:4000/send_mail", {
  headers: {
    "Content-Type": "application/json",
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "POST"
  },
  data: {
    name
  }
});

    La cabecera Access-Control-Allow-Origin permite que cualquier dominio haga una solicitud a tu backend, y la cabecera Content-Type especifica que los datos que se envían están en formato JSON.

    Además, asegúrate de enviar los datos en el formato correcto en tu solicitud axios (con la propiedad data en lugar de pasarla como un objeto). Utiliza el fragmento de código anterior para enviar tus datos.

    Adicionalmente, verifica que la URL a la que estás haciendo la solicitud en axios.post coincida con la URL que has especificado en la ruta de tu backend (/send_mail).

    Si el problema persiste, intenta agregar app.options('/send_mail', cors()) antes del método app.post en tu backend, para manejar las solicitudes previas a CORS.

    Espero que esta solución te ayude a resolver el problema que estás enfrentando.

Comments are closed.