fetch() POST request to Express.js generates empty body {} : <p><strong>Goal:</strong> send some defined string data from <strong>HTML</strong> in a <code>fetch()</code> function e.g. "MY DATA"</p>

<hr>

<p>My code:</p>

<p><strong>HTML</strong></p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;

&lt;script type="text/javascript"&gt;
    function fetcher() {
      fetch('/compute',
        {
          method: "POST",
          body: "MY DATA",
          headers: {
            "Content-Type": "application/json"
          }
        }
      )
      .then(function(response) {
        return response.json();
      })
      .then(function(myJson) {
        console.log(myJson);
      });
    }
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p><strong>Server.js</strong></p>

<pre><code>var express = require("express");
var app     = express();
var compute = require("./compute");
var bodyParser = require("body-parser");

//not sure what "extended: false" is for
app.use(bodyParser.urlencoded({ extended: false }));

app.post('/compute', (req, res, next) =&gt; {
    console.log(req.body);
    var result = compute.myfunction(req.body);
    res.status(200).json(result);
});
</code></pre>

<p><strong>Currently:</strong> <code>console.log(req.body)</code> logs <code>{}</code></p>

<p><strong>Desired:</strong> <code>console.log(req.body)</code> logs <code>"MY DATA"</code></p>

<p><strong>NOTES:</strong></p>

<ol>
<li>I also tried sending body in fetch() as <code>body: JSON.stringify({"Data": "MY DATA"})</code> but get the same empty {}</li>
<li>I either my fetch() request, or my bodyParser(), is not setup correctly.</li>
</ol>
