Next.js Webhook返回301重定向而非200的排查求助

导致你的Webhook端点返回301的常见原因主要和路径匹配、Next.js配置有关，以下是具体排查和解决步骤：

• 检查请求路径的末尾斜杠：
  Next.js的API路由对路径的末尾斜杠敏感。如果你的API路由文件是pages/api/webhook.js，正确的访问路径是/api/webhook（无末尾斜杠）；如果支付应用请求的是/api/webhook/（带斜杠），Next.js会自动返回301重定向到不带斜杠的版本。反过来，如果你的路由是pages/api/webhook/index.js，则需要请求带斜杠的路径，否则会触发重定向。

• 检查Next.js的trailingSlash配置：
  打开next.config.js，查看是否设置了trailingSlash选项：

  • 若trailingSlash: true，所有路径强制要求末尾带斜杠，此时请求不带斜杠的URL会被重定向；
  • 若trailingSlash: false（默认值），带斜杠的请求会被重定向到不带斜杠的版本。
    确保这个配置和支付应用发送的Webhook URL路径一致。

• 排查中间件或路由冲突：
  检查是否存在自定义的middleware.js，里面的路由规则可能导致Webhook请求被意外重定向；同时确认没有同名的页面路由（即pages/webhook.js这类文件），避免请求被错误路由到页面而触发重定向。

另外，你的代码中存在一个错误（虽然不是301的直接原因，但会导致后续逻辑失败）：
你使用了JSON.parse(req)来解析请求数据，这是错误的。Next.js的API路由会自动解析POST请求的body，直接使用req.body即可。修正后的代码如下：

export default async function WebhookHandler(req, res) {
    if (req.method === 'POST') {
        const requestData = req.body;

        if (requestData?.status === "paid") {
            // Code to update database
        }

        res.status(200).json({ received: true });
    } else {
        res.setHeader('Allow', 'POST');
        res.status(405).end('Method not allowed.');
    }
}

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