Next.js调用SendGrid接口遇405 Method Not Allowed错误求助

核心问题分析 #

你遇到的405错误主要来自Next.js App Router API路由的写法错误，同时前端数据传递结构和SendGrid自定义字段格式也存在潜在问题：

• App Router的route.ts不使用NextApiRequest/NextApiResponse，而是标准的Request对象
• 错误的请求体获取方式导致后端无法拿到数据，进而触发方法不允许的错误
• SendGrid自定义字段需要使用平台分配的字段ID，而非自定义名称

分步解决方案 #

1. 修复API路由（app/api/sendgrid/route.ts） #

替换原有代码为以下正确的App Router写法：

import axios from "axios";
import { NextResponse } from "next/server";

export async function POST(req: Request) {
  try {
    // 正确解析请求体（适配前端传递的{ data }结构）
    const { data } = await req.json();
    
    // 调用SendGrid API
    const sendGridResponse = await axios.post(
      "https://api.sendgrid.com/v3/marketing/contacts",
      {
        contacts: [{ 
          email: data.email,
          // 注意：SendGrid自定义字段需使用平台生成的ID（格式为eX_字段名，替换为你的实际ID）
          custom_fields: {
            e1_full_name: data.full_name,
            e2_budget: data.budget,
            e3_needs: data.needs
          }
        }],
        list_ids: [process.env.SENDGRID_MAILING_ID!]
      },
      {
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${process.env.SENDGRID_API_KEY!}`
        }
      }
    );

    return NextResponse.json({ success: true, data: sendGridResponse.data });
  } catch (err) {
    console.error("SendGrid请求错误:", err);
    return NextResponse.json({ error: "同步失败" }, { status: 500 });
  }
}

2. 优化前端请求（page.tsx中的handleSubmit） #

简化数据传递结构，避免多层嵌套：

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();
  try {
    // 直接传递data对象，而非包裹在{ data }中
    const result = await axios.post("/api/sendgrid", data);
    if (result.status === 200) {
      setDataSent(true);
    }
  } catch (err) {
    console.log("同步SendGrid失败", err);
  }
};

3. 关键注意事项 #

• SendGrid自定义字段ID：登录SendGrid后台，进入「Marketing > Contacts > Custom Fields」，查看每个自定义字段对应的ID（格式为eX_字段名），替换代码中的对应值
• API权限验证：确保你的SendGrid API Key拥有「Marketing Contacts」的读写权限
• 环境变量：确认SENDGRID_API_KEY和SENDGRID_MAILING_ID已正确配置在.env.local中，且Next.js已加载这些变量

额外排查步骤 #

如果仍有问题：

• 检查SendGrid的域名验证状态，确保已完成所有验证步骤
• 用Postman直接测试SendGrid API，确认请求体和权限是否正常
• 查看Next.js终端日志，确认API路由是否被正确触发

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