React+Nodemailer联系表单出现404 Not Found错误求助

问题诊断与修复方案 #

1. 后端路由拼写错误（核心问题之一） #

在server.js的/contactForm路由处理函数里，第一行的rew.body.name是笔误，应该是req.body.name。这个错误会导致服务器内部报错，无法正常响应请求，甚至间接引发404。

修复后代码片段：

router.post("/contactForm", (req, res) => {
    // 修正拼写：rew → req
    const name = req.body.name;
    const email = req.body.email;
    const message = req.body.message;
    // ... 其余代码不变
});

2. 前端表单属性干扰 #

你的表单设置了target="_blank"，虽然handleSubmit里调用了e.preventDefault()阻止默认提交，但这个属性会触发额外页面跳转行为，干扰AJAX请求逻辑，建议移除：

<form
    className='RO__ContactForm-content_form'
    action={FORM_ENDPOINT}
    onSubmit={handleSubmit}
    method='POST'
    // 删掉 target="_blank"
>

3. 邮件配置的两处错误 #

• mail对象里的hmtl是拼写错误，应为html，否则邮件内容无法正常渲染；
• to字段的invariant.rafael.3096@getDefaultNormalizer.com是无效测试地址，替换成你实际接收邮件的邮箱。

修复后邮件配置：

const mail = {
    from: name,
    to: 'your-real-email@example.com', // 替换为真实邮箱
    subject: 'Contact Form Submission',
    // 修正拼写：hmtl → html
    html: `<p>Name: ${name} </p> <p>Email: ${email}</p> <p>Message: ${message}</p>`,
};

4. 前端请求添加错误处理 #

当前代码没有处理请求失败的情况，补充后方便排查问题：

const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus("Sending...");
    const { name, email, message } = e.target.elements;
    let details = {
        name: name.value,
        email: email.value,
        message: message.value,
    };
    try {
        let response = await fetch("http://localhost:3000/contactForm", {
            method: 'POST',
            headers: {
                "Content-type": "application/json;charset=utf-8",
            },
            body: JSON.stringify(details),
        });
        if (!response.ok) {
            throw new Error(`请求失败：状态码 ${response.status}`);
        }
        let result = await response.json();
        alert(result.status);
    } catch (error) {
        console.error("提交出错:", error);
        alert("发送失败，请稍后重试");
    } finally {
        setStatus("Submit");
    }
};

5. 端口冲突排查 #

如果前端用React默认的3000端口启动，会和后端端口冲突。建议把后端改成5000端口：

• 后端server.js里修改app.listen(5000, () => console.log("Server Running on 5000"));
• 前端请求地址改成http://localhost:5000/contactForm

内容的提问来源于stack exchange，提问作者Rafael Oliva