title: React FormData() shows correct payload but getting 400 bad request
body: <p>I am using a call to <code>new FormData()</code>. The network tab shows that the payload is correct. In the console I am getting the following error:</p>
  
  <pre><code>{message: "Blog validation failed: title: Path `title` is required., postBody: Path `postBody` is required."}
  </code></pre>
  
  <p>However, in the network tab it's showing that the title and postBody fields are being sent:</p>
  
  <p><a href="https://i.stack.imgur.com/c9CRc.png" rel="nofollow noreferrer">Network tab headers output</a></p>
  
  <p>The server is written with nodejs and is using mongodb. All the routes are working on the backend when testing. Data is posted fine when testing it using a .rest file, but I'm still new to node so I'll post my handler for the post route as well:</p>
  
  <pre><code>router.post('/', async (req, res) =&gt; {
      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 })
      }
  })
  </code></pre>
  
  <p>Like I said, when making calls to this route directly using a .rest file everything works fine.</p>
  
  <p>Here's my form submit handler on the frontend:</p>
  
  <pre><code>handleSubmit = (event) =&gt; {
      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 =&gt; res.json())
      .then(err =&gt; console.error(err))
    }
  </code></pre>
  
  <p>Maybe I misunderstand the usage of <code>new FormData()</code>?</p>