NextJS POST 请求中 req.body 返回 ReadableStream 的原因及解决方案

javascript

2024-03-01 10:48:38

NextJS POST 请求中 req.body 返回 ReadableStream 的疑难解答

简介

NextJS 中处理 POST 请求时，从 req.body 中获取数据却发现它是一个 ReadableStream，而不是预期的 JSON 数据，这可能会令人困惑。本文将深入探讨造成此问题的原因并提供有效的解决方案。

问题原因

出现 ReadableStream 的原因通常有以下几点：

缺乏 bodyParser 中间件： NextJS 缺少内置的 bodyParser 中间件，因此必须手动添加它来解析请求体。
标头错误： 请求标头必须指定内容类型为 "application/json"，以指示请求体包含 JSON 数据。
服务器配置不当： 服务器可能未正确配置为处理 JSON 请求体。

解决方案

1. 添加 bodyParser 中间件

可以使用 next-connect 库轻松添加 bodyParser 中间件：

import nextConnect from 'next-connect';

const apiRoute = nextConnect();

apiRoute.use(bodyParser.json());

// ...

2. 设置正确的标头

确保在发送 POST 请求时设置正确的标头：

const res = await fetch('http://localhost:3000/api/register', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  // ...
});

3. 配置服务器

如果使用 Express 作为服务器，请确保正确配置其 body-parser 中间件：

const app = express();

app.use(bodyParser.json());

// ...

实战示例

假设我们有一个用于注册用户的 register API 路由：

// pages/api/register.js
import dbConnect from '@/lib/dbConnect';
import User from '@/models/User';
import nextConnect from 'next-connect';

const apiRoute = nextConnect();

apiRoute.use(bodyParser.json());

apiRoute.post(async (req, res) => {
  // ...
});

并在请求中设置正确的标头：

const res = await fetch('http://localhost:3000/api/register', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    // ...
  }),
});