title: Using fetch to post cross-origin JSON data to Express backend
body: <p>I'm trying to use Fetch to post some JSON data from a form and log the response from the Express server, which should be a simple JSON response containing the posted form values, but I'm only receiving an empty object in the console.</p>
  
  <p>The HTML and JavaScript can be executed from this <a href="http://jsfiddle.net/s9Lkejzd/" rel="nofollow noreferrer"><strong>JSFiddle Link</strong></a>.</p>
  
  <p>How do I receive a populated JSON object response from the server?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;form id="myForm"&gt;
      &lt;input type="text" placeholder="Enter First Name" name="firstName" /&gt;
      &lt;input type="text" placeholder="Enter Last Name" name="lastName" /&gt;
      &lt;input type="submit" value="SUBMIT" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>const form = document.getElementById("myForm");
  
  form.addEventListener("submit", (e) =&gt; {
  
      e.preventDefault();
  
      fetch("http://localhost:5000/form-post", {
              method: "POST",
              mode: "cors",
              body: {
                  firstName: e.target.firstName.value,
                  lastName: e.target.lastName.value
              } 
          })
          .then((res) =&gt; res.json())
          .then((data) =&gt; console.log(data));
  });
  </code></pre>
  
  <p><strong>Express Server</strong></p>
  
  <pre><code>const express = require("express");
  const app = express();
  
  const cors = (req, res, next) =&gt; {
  
      res.header("Access-Control-Allow-Origin", "*");
      res.header("Access-Control-Allow-Methods", "GET, PUT, PATCH, POST, DELETE");
      res.header("Access-Control-Allow-Headers", "Origin, Content-Type");
  
      next();
  };
  
  app.use(cors);
  app.use(express.json());
  
  app.post("/form-post", (req, res) =&gt; {
  
      res
          .status(200)
          .json({
              First_Name: req.body.firstName,
              Last_Name: req.body.lastName
          });
  
  });
  
  app.listen(5000, () =&gt; console.log("Server started on port 5000..."));
  </code></pre>
  
  <p><strong>[EDIT:]</strong> It works fine in Postman (screen captures attached) but It doesn't seem to work with Fetch.</p>
  
  <p><a href="https://i.stack.imgur.com/HJXtp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HJXtp.png" alt="enter image description here"></a></p>