如何处理next.js中的post请求？

html5 • • 问答

我想POST使用 next.js 在我的 api 文件夹中设置一个路由，并且我正在将数据发送到该路由，但我无法解析数据以将其实际保存在数据库中。POST在 next.js 中处理路由的最佳方法是什么。特别是解析JSON格式的数据？

回答

要让 POST 请求在 Next.js API 路由中工作，您可能需要做 3 件事。

  • 将方法限制为 POST
  • 使用JSON.parse()解析JSON在路线
  • 向后端发送请求

接口路由

Next.js 中的 API 路由默认支持所有类型的请求，包括 GET、POST、DELETE 等。因此，虽然它不是必需的，但最好将路由限制为您想要支持的方法。

在您的情况下，如果您只想支持POST某个路由上的请求，您可以使用req.method过滤掉非发布请求。

if (req.method !== 'POST') {
  res.status(400).send({ message: 'Only POST requests allowed' })
  return
}

if (req.method !== 'POST') {
  res.status(400).send({ message: 'Only POST requests allowed' })
  return
}

要解析 JSON，您可以使用JSON.parse().

const body = JSON.parse(req.body)

把它们放在一起，你的 API 路由应该是这样的：

// pages/route-name.js

export default function handler(req, res) {
  if (req.method !== 'POST') {
    res.status(405).send({ message: 'Only POST requests allowed' })
    return
  }

  const body = JSON.parse(req.body)

  // the rest of your code
}

发送请求

最后，您需要从前端代码向后端发送 POST 请求。您可能已经知道如何执行此操作，但为了完整起见，请提及此内容。

fetch顺便说一句，您无需担心与 Next.js 的跨浏览器兼容性。Next.js在需要时自动添加一个polyfill 。

以上是如何处理next.js中的post请求？的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>