Meta：使用 NEXT JS 配置 Whats App 回调 Url

我有一些使用 next js 到我的 webhook 端点的

get

post

import type { NextApiRequest, NextApiResponse } from 'next'
import axios from 'axios'

const accessToken = process.env.TOKEN
const myToken = process.env.MY_TOKEN

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  if (req.method === 'GET') {
    const mode = req.query['hub.mode']
    const challenge = req.query['hub.challenge']
    const token = req.query['hub.verify_token']

    if (mode && token) {
      if (mode === 'subscribe' && token === myToken) {
        console.log('WEBHOOK_VERIFIED')
        return res.status(200).send(challenge)
      } else {
        return res.status(403)
      }
    }
  }
  if (req.method === 'POST') {
    const body = req.body
    console.log(JSON.stringify(body, null, 2))

    if (body.object) {
      if (
        body.entry &&
        body.entry[0].changes &&
        body.entry[0].changes[0].value.message &&
        body.entry[0].changes[0].value.message[0]
      ) {
        let phoneId = body.entry[0].changes[0].value.metadata.phone_number_id
        let from = body.entry[0].changes[0].value.messages[0].from
        let msg_body = body.entry[0].changes[0].value.messages[0].text.body

        console.log('BODY >>>', msg_body)

        axios({
          method: 'post',
          url: `.0/${phoneId}/messages`,
          headers: {
            'Content-Type': 'application/json',
            Authorization: `Bearer ${accessToken}`,
          },
          data: {
            messaging_product: 'whatsapp',
            to: from,
            text: {
              body: 'Hi From STS',
            },
          },
        })
        return res.status(200)
      }
    } else {
      return res.status(404)
    }
  }
}

我生成一个从 5001 代理的 ngrok url，并尝试将其设置为 Whats app 的元开发人员配置选项卡中的回调 url。单击验证并保存后，我看到以下消息：无法验证回调 URL 或验证令牌。请验证所提供的信息或稍后重试。检查我的控制台时，我可以确认日志

WEBHOOK_VERIFIED

我见过其他人遇到此错误，但对于我的用例来说没有明确的解决方案。任何帮助将不胜感激