React表单POST请求遭遇500内部服务器错误的解决咨询

前端代码问题及修复 #

• 错误1：使用mode: 'no-cors'
  该模式会限制浏览器获取响应内容，同时忽略Content-Type请求头，直接删除此配置即可。
• 错误2：请求体格式错误
  代码中直接写FormData无效，需将表单数据转为JSON字符串，用body: JSON.stringify(formData)替换（formData为你的表单状态对象）。
• 错误3：混合使用async/await和.then()
  这种写法会导致响应流被重复解析，改用try/catch包裹异步逻辑，统一用await处理响应。

修复后的前端handleSubmit函数：

async function handleSubmit(e){
    e.preventDefault();
    SetBtnText("Sending...");
    try {
        const response = await fetch("http://localhost/form/contact", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify(formData) // 替换为你的表单数据对象
        });
        
        const result = await response.json();
        SetBtnText("Send");
        SetFormData(InitialFormData);
        
        if (result.code === 200){
            setStatus({ success: true, message: 'Message sent successfully' });
        } else {
            setStatus({ success: false, message: 'Something went wrong, please try again later.' });
        }
    } catch (error) {
        SetBtnText("Send");
        setStatus({ success: false, message: 'Network error, please try again.' });
        console.error(error);
    }
}

后端代码问题及修复 #

• 错误1：中间件顺序错误
  app.use(cors())和app.use(express.json())必须放在app.use('/form', router)之前，否则路由无法应用CORS和JSON解析，导致req.body为空，触发undefined错误（这是500错误的核心原因）。
• 错误2：Gmail发件人配置错误
  Gmail不允许用用户输入的邮箱作为from字段，需设置为授权邮箱（即process.env.EMAIL），否则邮件发送失败。
• 错误3：缺少字段校验和全局错误捕获
  未校验req.body必填字段，缺失时会触发字符串拼接报错；需添加全局try/catch捕获未处理异常。
• 错误4：Gmail授权密码问题
  不能用普通登录密码，需开启Gmail两步验证后生成应用专用密码，替换process.env.PASSWORD的值。

修复后的后端Server.js代码：

const express = require('express')
const cors = require("cors");
const nodemailer = require("nodemailer");
const router = express.Router();
const dotenv = require('dotenv')

dotenv.config({path: "./.env"})

const app = express();
// 先应用CORS和JSON解析中间件
app.use(cors());
app.use(express.json());
// 再挂载路由
app.use('/form', router);

app.listen(80, () => {
    console.log("Server Running at Port:80")
})

const transporter = nodemailer.createTransport({
    service: 'gmail',
    auth: {
        user: process.env.EMAIL,
        pass: process.env.PASSWORD // 使用Gmail应用专用密码
    }
})

router.post('/contact', (req, res) => {
    try {
        // 校验必填字段
        const { FirstName, LastName, Email, Message, Phone } = req.body;
        if (!FirstName || !LastName || !Email || !Message) {
            return res.status(400).json({ code: 400, msg: "Missing required fields" });
        }
        
        const Name = `${FirstName} ${LastName}`;
        
        const MailOptions = {
            from: process.env.EMAIL, // 固定为授权邮箱
            to: process.env.EMAIL,
            subject: "Contact Form Submission - Portfolio",
            html: `<p>Name: ${Name}</p>
                <p>Email: ${Email}</p>
                <p>Phone: ${Phone || 'N/A'}</p>
                <p>Message: ${Message}</p>`,
        }
        
        transporter.sendMail(MailOptions, function(error) {
            if (error) {
                console.error("Email send error:", error);
                return res.status(500).json({ code: 500, msg: "Failed to send email" });
            } else {
                res.json({ code: 200, msg: "Sent Successfully" });
            }
        });
    } catch (error) {
        console.error("Server error:", error);
        res.status(500).json({ code: 500, msg: "Internal server error" });
    }
});

额外检查项 #

1. 确认.env文件存在，EMAIL和PASSWORD配置正确，Gmail已开启两步验证并生成应用专用密码。
2. 用Postman或curl测试POST http://localhost/form/contact接口，确保接口本身正常后再联调前端。
3. 查看浏览器控制台和服务器终端的错误日志，定位具体报错信息。

内容的提问来源于stack exchange，提问作者Sanyam Kapoor