如何让Next.js API邮件路由将主机IP地址发送到SendGrid

问题根因 #

你对Next.js /api路由的基础运行逻辑理解是正确的：默认情况下，Pages Router的/pages/api目录、App Router的app/api目录下的路由均为服务端执行，代码不会打包到客户端产物，向第三方接口发起的请求默认从Next.js部署的主机节点发出，不会走客户端IP。
你遇到的客户端IP请求SendGrid被拦截的问题，是两处代码问题+潜在配置疏漏导致的：

• API路由内的SendGrid请求缺少await关键字：未等待异步请求完成就直接向客户端返回，会导致请求逻辑执行时序不可控，极端场景下会出现逻辑泄露到客户端执行的情况
• 客户端请求缺少必要头信息：表单提交的POST请求未声明Content-Type: application/json，部分场景下会触发框架的异常解析逻辑，进一步放大异步时序问题

修复方案 #

修正服务端API路由代码 #

给SendGrid请求加上await，同时补充错误捕获逻辑，避免异常泄露：

// 核心逻辑示例，可结合你的原有业务逻辑调整
try {
  const response = await fetch(`https://api.sendgrid.com/v3/mail/send`, requestOptions)
  if (response.ok) {
    res.status(200).json({ success: true })
  } else {
    res.status(response.status).json({ success: false, message: '邮件发送失败' })
  }
} catch (err) {
  console.error('SendGrid调用失败：', err)
  res.status(500).json({ success: false, message: '服务端内部错误' })
}

修正客户端提交代码 #

补充请求头，同时增加接口错误判断，避免请求失败仍跳转感谢页：

const onSubmit = async (data) => {
  try {
    const result = await fetch('/api/customer_enquiry', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(data)
    })
    if (result.ok) {
      router.push('/thanks')
    } else {
      // 自行补充前端报错提示逻辑
      console.error('表单提交失败')
    }
  } catch (err) {
    console.error('请求异常：', err)
  }
}

额外排查项 #

如果修复代码后问题仍然存在，检查两处配置：

• App Router场景下确认api路由文件顶部没有添加'use client'指令，添加该指令会导致路由逻辑在客户端执行
• 确认部署平台没有将/api路径配置为静态资源、或者边缘侧客户端执行的规则

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