Error: La solicitud falló con el código de estado 404, React, Axios.
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!
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
:La cabecera
Access-Control-Allow-Origin
permite que cualquier dominio haga una solicitud a tu backend, y la cabeceraContent-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étodoapp.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.