Node.js React FormData（）显示正确的负载，但收到错误的请求

我正在调用

newformdata（）

。网络选项卡显示有效负载是正确的。在控制台中，我收到以下错误：

{message: "Blog validation failed: title: Path `title` is required., postBody: Path `postBody` is required."}

但是，在“网络”选项卡中，显示正在发送标题和正文字段：

服务器是用nodejs编写的，并且使用mongodb。测试时，所有路由都在后端工作。使用.rest文件测试数据时，数据可以正常发布，但我对node还是新手，因此我也将发布发布路径的处理程序：

router.post('/', async (req, res) => {
    const blogPost = new Blog({
        title: req.body.title,
        author: req.body.author,
        postBody: req.body.postBody,
        postDate: req.body.postDate
    })
    try {
        const newPost = await blogPost.save();
        res.status(201).json(newPost);
    } catch (err) {
        res.status(400).json({ message: err.message })
    }
})

正如我所说，当直接使用.rest文件调用此路由时，一切正常

这是我在前端的表单提交处理程序：

handleSubmit = (event) => {
    event.preventDefault();
    const data = new FormData(event.target);

    console.log(event.target);
    console.log(data);
    console.log(event.target.postBody.value);

    fetch('http://localhost:4000/blog', {
      method: 'POST',
      mode: 'cors',
      body: data
    })
    .then(res => res.json())
    .then(err => console.error(err))
  }

---

也许我误解了

newformdata（）

的用法？

您需要在节点应用程序中使用body解析器

 const bodyParser = require('body-parser')

 app.use(
     bodyParser.urlencoded({
         extended: true
     })
 )

app.use(bodyParser.json())

---

此外，请确保您收到了数据。尝试记录您的数据。

您需要安装

body parser

，并在app.js中使用此依赖项（或您使用的名称）

复制文件顶部的下一个代码段：

const bodyParser = require('body-parser');
const express = require('express');
const app = express();

然后，复制文件正文中的下一个代码段

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

---

有了这个，你的路线就完了

好的，所以当我添加body解析器时，我仍然得到相同的错误。不知道我做错了什么。然而，为了我自己处理这个问题的时间，我想出了另一个解决办法。我通过

app.use（express.json（））

最后，我只需要发送带有内容类型的标题，而不再使用

FormData（）

。我的更新表单提交处理程序（工作）：

---

这对我来说很有效，这就是我现在要做的，这样我可以继续前进，但是，它仍然不能回答为什么我以前尝试的formData（）方法不起作用，即使在使用body parser之后，正如这里所建议的那样。

你在node中使用body parser吗？我没有。我应该这样做吗？在我的server.js文件中，我使用express.json（）来接受json。答案在于XHR的

内容类型

（

多部分/表单数据

）。您需要一些中间件来解析

多部分/表单数据

请求。不幸的是，

body parser

不解析这些类型的请求。相反，你会想看看穆特：或类似的东西。有关更多信息，请参阅此stackoverflow问题：@MattCarlotta感谢您提供的信息，我将对此进行调查。当我像上面那样执行fetch调用时，您是否知道为什么它在没有中间件的情况下工作？您使用的是

application/json

，而

body parser

和/或

express

可以解析。实际上，这是推荐的，因为

FormData

对于上传文件（有或没有额外的字段数据）非常有用。另一方面，如果您希望减少冗长的体验，我建议使用axios:over

fetch

。Axios处理请求内容类型，自动解析JSON，可以配置为具有基本url（例如，附加

http://localhost:4000/

适用于每一个请求，因此您不必这样做），并且具有强大的浏览器支持。总的来说，我觉得它对开发者更友好。明白了，谢谢你提供的信息。很高兴知道FormData对于上传文件更有用，因为我正在构建一个自定义bb编辑器，文件上传在我的待办事项列表中。我听说过axios，大多数情况下这只是一个学习练习，所以我不想在项目中添加太多不同的东西。

handleSubmit = (event) => {
    event.preventDefault();
    const data = new FormData(event.target);
    const body = event.target.postBody.value;
    const postTitle = event.target.title.value;

    console.log(event.target);
    console.log(data);
    console.log(event.target.postBody.value);

    fetch('http://localhost:4000/blog', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      mode: 'cors',
      body: JSON.stringify({
        title: postTitle,
        postBody: body
      })
    })
    .then(res => res.json())
    .then(err => console.error(err))
  }