Next.js中/api/contact接口调用SendGrid发邮件后无返回响应问题

问题根因 #

你的问题有两个核心原因：

1. 后端接口成功响应时使用res.status(200).end()仅结束了响应流，没有返回任何可解析的JSON内容，但前端代码中调用了await response.json()尝试解析响应体，导致解析失败拿不到返回值。
2. 现有代码还存在异步错误捕获逻辑失效、非POST请求无返回、前端收到响应后未更新表单状态的问题。

后端代码修改方案 #

const sgMail = require('@sendgrid/mail');

sgMail.setApiKey(process.env.SENDGRID_APIKEY);

// 改为async函数方便用await处理异步逻辑
export default async function handler(req, res) {
    // 处理非POST请求的情况，避免无响应报错
    if (req.method !== 'POST') {
        return res.status(405).json({ success: false, message: '不支持的请求方法' })
    }
    const email = {
        from: process.env.EMAIL_FROM,
        to: process.env.EMAIL_TO,
        subject: 'Website Contact Form',
        html: `<div>
      <div><strong>Name:</strong> ${req.body.name}<br/></div>
      <div><strong>Phone:</strong> ${req.body.phone}<br/></div>
      <div><strong>Email:</strong> ${req.body.email}<br/></div>
      <div><strong>more:</strong> ${req.body.more}<br/></div>
    </div>`,
    };
    try {
        await sgMail.send(email)
        // 返回JSON格式的成功响应
        return res.status(200).json({ success: true, message: '邮件发送成功' })
    } catch (error) {
        console.log('发送失败', error)
        // 统一返回JSON格式的错误响应
        return res.status(500).json({ success: false, message: '邮件发送失败', error: error.message })
    }
}

前端代码修改方案 #

重点修改onSubmit逻辑，新增响应处理和表单状态更新：

onSubmit={async (values, { setSubmitting, setFieldValue }) => {
    setSubmitting(true);
    // 重置之前的提示状态
    setFieldValue('success', false)
    setFieldValue('nosend', false)
    try {
        const response = await fetch('/api/contact', {
            body: JSON.stringify({
                name: values.name,
                phone: values.phone,
                email: values.email,
                more: values.more,
            }),
            headers: {
                'Content-Type': 'application/json',
            },
            method: 'POST',
        });
        const data = await response.json();
        if (response.ok && data.success) {
            setFieldValue('success', true)
        } else {
            setFieldValue('nosend', true)
        }
        console.log('返回结果', data);
    } catch (err) {
        console.log('请求出错', err)
        setFieldValue('nosend', true)
    } finally {
        setSubmitting(false);
    }
}}

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