Empty body in fetch post request

Question

i\'m struggling with the fetch API in javascript. When i try to POST something to my server with fetch, the request body an empty array. But when i use Postman it works... H

Answer 1

none seems to work for me I solved this issue using middleware

app.use(restify.plugins.bodyParser());

or

app.use(multer().array())

Answer 2

The issue is

mode: 'no-cors'

From the documentation...

Prevents the method from being anything other than HEAD, GET or POST, and the headers from being anything other than simple headers

The simple content-type header restriction allows

• text/plain,
• application/x-www-form-urlencoded, and
• multipart/form-data

This causes your nicely crafted Content-Type: application/json header to become content-type: text/plain (at least when tested through Chrome).

Since your Express server is expecting JSON, it won't parse this request.

I recommend omitting the mode config. This uses the default "cors" option instead.

---

Since your request is not simple, you'll probably want to add some CORS middleware to your Express server.

Another (slightly hacky) option is to tell Express to parse text/plain requests as JSON. This allows you to send JSON strings as simple requests which can also avoid a pre-flight OPTIONS request, thus lowering the overall network traffic...

app.use(express.json({
  type: ['application/json', 'text/plain']
}))

EDIT: Added ending parenthesis to app.use final code block.

Answer 3

To complement the excellent answers that mentioned removing the mode: 'no-cors' option, and if you don't feel like adding a CORS middleware to Express, you may just want to handle "pre-flight" requests under an OPTIONS block:

app.options('*', (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type'); // Add other headers here
  res.setHeader('Access-Control-Allow-Methods', 'POST'); // Add other methods here
  res.send();
});

Another nice answer here : https://www.vinaygopinath.me/blog/tech/enable-cors-with-pre-flight/

Hope this helps!

Answer 4

Please see document mode, no-cors mode only send simple headers. So the content-Type is changed to text/html; instead of application/json so your server can't recognize body format and return empty.

Remove mode: 'no-cors', and you should be fine.