Vercel部署Next.js项目SendGrid生产环境发邮件返回400错误求助

核心原因排查&解决步骤 #

• 1. 配置Vercel生产环境变量
     本地开发时你在.env.local中配置的SENDGRID_API_KEY默认不会同步到Vercel生产环境，需要手动配置：
     进入Vercel对应项目的「Settings」→「Environment Variables」页面，添加SENDGRID_API_KEY变量，值和你本地使用的一致，配置完成后需要重新部署项目才能生效。
• 2. 校验SendGrid API Key权限
     确认你使用的SendGrid API Key开启了「Full Access to Mail Send」权限，同时不要开启SendGrid的IP白名单限制：Vercel无服务器函数的出口IP是动态的，白名单会直接拦截请求。
• 3. 修正发件人相关配置
     你开启的谷歌账户「允许安全性较低的应用」权限完全不影响当前逻辑：你是通过SendGrid接口发送邮件，并非直接调用Gmail SMTP服务，该权限不需要开启。
     请确认SendGrid后台的发件人验证，你代码中填写的mysenderemail@gmail.com确实已经完成了Single Sender Verification，没有拼写错误。
• 4. 优化接口逻辑避免异常报错
     当前/api/send.js接口没有限制请求方法，非POST请求进入时会触发逻辑异常，同时错误日志不够清晰，建议修改代码如下：

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

export default async function(req, res) {
  // 新增请求方法校验
  if (req.method !== 'POST') {
    return res.status(405).send('Method not allowed')
  }
  sgMail.setApiKey(process.env.SENDGRID_API_KEY)

  const { phone, email, message } = req.body

  const msg = {
    to: 'myemail@outlook.com',
    from: 'mysenderemail@gmail.com',
    subject: `New Message From - ${email}`,
    text: message,
    html: `
      <p>Phone: ${phone}</p>
      <p>Sent from: ${email}</p>
      <div>${message}</div>
    `
  }

  try {
    await sgMail.send(msg)
    res.status(200).send('Message sent successfully.')
  } catch (error) {
    // 输出更详细的错误日志，可在Vercel Functions日志中查看
    const errorMsg = error.response?.body?.errors?.[0]?.message || error.message || 'Unknown error'
    console.error('SendGrid send error:', errorMsg)
    res.status(400).send(`Message not sent: ${errorMsg}`)
  }
}

修改后部署，再触发请求可以直接在Vercel项目的「Functions」日志中看到具体的错误原因，快速定位问题。

• 5. 检查SendGrid账号状态
     确认SendGrid账号没有被限制发送权限，新注册账号需要完成完整的身份验证才能正常发信，同时确认剩余发送配额没有用尽。

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