fetch() POST request to Express.js generates empty body {}

Question

Goal: send some defined string data from HTML in a fetch() function e.g. "MY DATA"

My code:

HTML

<!DOCTYPE html>
<html>
<body>

<script type="text/javascript">
    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);
      });
    }
</script>

</body>
</html>

Server.js

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) => {
    console.log(req.body);
    var result = compute.myfunction(req.body);
    res.status(200).json(result);
});

Currently: console.log(req.body) logs {}

Desired: console.log(req.body) logs "MY DATA"

NOTES:

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

score 29 · Accepted Answer · answered Oct 07 '18 at 00:21

29

Add the following line in addition to your current bodyParser app.use() right before:

app.use(bodyParser.json());

This will enable bodyParser to parse content type of application/json.

Hopefully that helps!

answered Oct 07 '18 at 00:21

Alexander Staroselsky

37,209
15
79
91

Ahhhh! I had this before, but *after* `app.use(bodyParser.json())`. Switching these around solved it! Thank you. – Wronski Oct 07 '18 at 00:25
5

The language around 'before' and 'after' here - is a bit confusing! Any clarity on that would be helpful. – sheriffderek Jun 07 '20 at 23:13
1

He means to add `app.use(bodyParser.json());` right before the `app.post(...)` – Dmitry Mikushin Nov 28 '20 at 12:38
6

The 2021 version is to use `app.use(express.json())` – Phil Nov 05 '21 at 01:34

Wronski · Answer 2 · 2018-10-07T00:30:28.630

8

I feel a bit stupid now once I worked out what bodyParser.urlencoded (source: https://www.npmjs.com/package/body-parser#bodyparserurlencodedoptions)

Returns middleware that only parses urlencoded bodies

Solution

Changed the fetch() request, from:

body: "MY DATA",
headers: { "Content-Type": "application/json" }

to

body: JSON.stringify({"Data": "MY DATA"}),
headers: { "Content-Type": "application/x-www-form-urlencoded" }

which solved the problem! Console logged:

{ '{"Data":"MY DATA"}': '' }

edited Oct 07 '18 at 00:30

answered Oct 07 '18 at 00:21

Wronski

1,506
3
18
37

1

You can keep the application/json content type, just need to add another line of configuration. Try my answer with you original fetch and content type. – Alexander Staroselsky Oct 07 '18 at 00:25
@AlexanderStaroselsky, yes, I prefer your answer since it produces a cleaner response: `{ data: 'MY DATA' }` – Wronski Oct 07 '18 at 00:32

fetch() POST request to Express.js generates empty body {}

2 Answers2

Linked