Clerk与Svix Webhook报错‘src property must be a valid json object’求助

在Next.js 13项目中尝试将Clerk数据同步到数据库，已通过Ngrok暴露Webhook接口，但Clerk仪表盘始终返回错误：{"message": "src property must be a valid json object"}，以下是对两段代码的问题分析及修复方案：

初始代码问题分析 #

• 重复读取请求体：代码中先后执行await request.json()两次，请求体是可读流，只能读取一次，第二次读取会得到空对象，导致后续JSON.stringify(payload)生成无效的"{}"，触发Clerk的JSON格式验证错误。
• 未处理空请求头：headersList.get()可能返回null，直接断言为WebhookRequiredHeaders会导致签名验证失败。
• 无响应返回：处理完逻辑后未返回NextResponse，Clerk无法确认Webhook是否成功接收，会判定请求异常。

修改后代码问题分析 #

• 硬编码密钥：new Webhook("your_secret_key_here")未使用环境变量webhookSecret，而是硬编码无效字符串，导致签名验证失败。
• 拼写错误：变量名sivx是svix的拼写错误，虽不影响执行，但属于低级失误。
• 无异常处理：未用try/catch包裹verify方法，验证失败时直接抛出错误，Clerk会收到500错误而非预期的400响应。
• 无响应返回：同样未返回任何响应，Clerk无法确认请求状态。

修复后的正确代码示例 #

import { Webhook, WebhookRequiredHeaders } from "svix";
import { NextResponse } from "next/server";

const webhookSecret = process.env.WEBHOOK_SECRET || "";

if (!webhookSecret) {
  throw new Error("WEBHOOK_SECRET 环境变量未设置");
}

async function handler(request: Request) {
  if (request.method !== "POST") {
    return NextResponse.json({ error: "仅支持POST请求" }, { status: 405 });
  }

  const svixId = request.headers.get("svix-id");
  const svixTimestamp = request.headers.get("svix-timestamp");
  const svixSignature = request.headers.get("svix-signature");

  if (!svixId || !svixTimestamp || !svixSignature) {
    return NextResponse.json({ error: "缺少必要的Svix请求头" }, { status: 400 });
  }

  try {
    const rawBody = await request.text();
    const webhook = new Webhook(webhookSecret);

    const event = webhook.verify(rawBody, {
      "svix-id": svixId,
      "svix-timestamp": svixTimestamp,
      "svix-signature": svixSignature,
    }) as { type: string; data: Record<string, any> };

    if (event.type === "user.created" || event.type === "user.updated") {
      const { id, ...userData } = event.data;
      // 在此添加同步到数据库的逻辑
      console.log("同步用户数据:", userData);
    }

    return NextResponse.json({ success: true }, { status: 200 });
  } catch (error) {
    console.error("Webhook验证失败:", (error as Error).message);
    return NextResponse.json({ error: "Webhook验证失败" }, { status: 400 });
  }
}

export const POST = handler;

关键注意事项 #

• 不要重复读取请求体：request.text()和request.json()只能调用一次，Svix验证需要原始请求体字符串，必须用request.text()。
• 环境变量配置正确：WEBHOOK_SECRET必须与Clerk仪表盘设置的密钥完全一致，不能有空格或拼写错误。
• 仅处理POST请求：Clerk仅发送POST类型的Webhook请求，无需导出GET/PUT方法。
• 必须返回响应：Clerk需要收到200状态码确认Webhook成功接收，否则会重复发送请求或标记为失败。
• 检查请求头完整性：缺少任意一个Svix相关请求头都会导致验证失败，需提前校验。

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