title: Can't POST data using JavaScript fetch API
body: <p>I'm trying to <code>POST</code> data to my server using the <code>fetch</code> API and every time I do I end up with an empty body.</p>
  
  <p>As far as I can tell from the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch" rel="nofollow"><code>fetch</code> documentation</a>, to post data you need to pass an object with a method key set to "POST" and a body key with a string or <code>FormData</code> object (or some others).</p>
  
  <p>Here's a simple example that is just not working as I would expect:</p>
  
  <pre><code>var formData = new FormData();
  formData.append("test", "woohoo");
  formData.append("foo", "bar")
  // prints out contents of formData to show that it has contents!
  formData.forEach(function(key, value) {
    console.log(`${key}: ${value}`);
  });
  
  fetch("/fetch", {
    method: "POST",
    body: formData
  }).then(function(response) {
    return response.json();
  }).then(function(json) {
    // Logs empty object
    console.log(json);
  }).catch(function(err) {
    console.log(err);
  });
  </code></pre>
  
  <p>I also have an express server on the back of this that logs the request body and echoes it in the response.</p>
  
  <pre><code>app.post("/fetch", function(req, res) {
    // Logs empty object :(
    console.log(req.body);
    res.send(JSON.stringify(req.body));
  });
  </code></pre>
  
  <p>I add the <code>formData</code> as the body of the <code>fetch</code> request, but nothing ever seems to go through.</p>
  
  <p><a href="https://gist.github.com/philnash/4ce0c0b10ef510f4dc440c3f9d5a24d6" rel="nofollow">Please find my test files in this gist here</a> and help!</p>