通过 Ngrok 处理 Next.js 14 API 路由中的 SVIX Webhook

Question

我面临一个问题，我似乎无法在 Next.js 14 应用程序中正确接收源自 SVIX 的 Webhook。

我正在使用 Ngrok 将请求转发到在本地主机上运行的 Next.js 应用程序。然而，每个 HTTP 请求都会返回“308 永久重定向”。

关于如何解决这个问题有什么想法吗？我现在只想记录响应。

下面是我的 Next.js API 路由（app/api/recallWebhook/route.js）：

import crypto from "crypto";

export async function POST(request) {
  try {
    const body = await request.json();

    console.log("Webhook received:", body);

    const signingSecret = process.env.DEV_RECALL_WEBHOOK_SIGNING_SECRET;
    console.log("Signing secret:", signingSecret);

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

    const signedContent = `${svixId}.${svixTimestamp}.${JSON.stringify(body)}`;
    const secretBytes = Buffer.from(signingSecret.split("_")[1], "base64");

    const computedSignature = crypto
      .createHmac("sha256", secretBytes)
      .update(signedContent)
      .digest("base64");

    const isSignatureValid = svixSignature.split(" ").some((sig) => {
      const [version, signature] = sig.split(",");
      return signature === computedSignature;
    });

    if (!isSignatureValid) {
      return new Response("Invalid signature", { status: 401 });
    }

    console.log("Verified webhook:", body);

    return new Response(
      JSON.stringify({
        message: "Webhook received and verified successfully",
      }),
      {
        status: 200,
        headers: {
          "Content-Type": "application/json",
        },
      }
    );
  } catch (error) {
    console.error("Error processing webhook", error);
    return new Response(
      JSON.stringify({ message: "Error processing webhook" }),
      {
        status: 500,
        headers: {
          "Content-Type": "application/json",
        },
      }
    );
  }
}

export function GET() {
  return new Response("GET method not supported", { status: 405 });
}

这是我的 Ngrok 服务器的快照：

Session Status                online
Account                       ******* (Plan: Free)
Version                       3.6.0
Region                        Europe (eu)
Latency                       38ms
Web Interface                 http://127.0.0.1:4040
Forwarding                    https://****-***-248-85-9.ngrok-free.app -> http://localhost:3000

Connections                   ttl     opn     rt1     rt5     p50     p90
                              103     4       0.00    0.01    6.05    149.09

HTTP Requests
-------------

POST /api/recallWebhook/       308 Permanent Redirect
POST /api/recallWebhook/       308 Permanent Redirect
POST /api/recallWebhook/       308 Permanent Redirect
POST /api/recallWebhook/       308 Permanent Redirect
POST /api/recallWebhook/       308 Permanent Redirect
POST /api/recallWebhook/       308 Permanent Redirect
POST /api/recallWebhook/       308 Permanent Redirect
POST /api/recallWebhook/       308 Permanent Redirect
POST /api/recallWebhook/       308 Permanent Redirect
POST /api/recallWebhook/       308 Permanent Redirect

这是我将 Webhook 请求发送到的端点 URL：

https://****-***-248-85-9.ngrok-free.app/api/recallWebhook/

Answer 1

所以这个问题似乎与 Next.js 如何处理重定向有关，我只需在我的 Next Config 中强制执行 TrailingSlash :

/** @type {import('next').NextConfig} */
const nextConfig = {

  trailingSlash: true,

}

module.exports = nextConfig;