Response body showing in network but not console

When sending a request to a link, and logging the response in the console (console.log(res) and console.log(res.body)) shows a ReadableStream but nothing is inside of it.

The bodyUsed value is also set to false and I do not understand why.

My backend is Express:

app.post('/newemail', async (req, res) => {
  const email_client = new Emails();
  let inbox = await email_client.create();
  res.set({'Content-Type': 'application/json'})
  res.json(inbox)
})

And I’m fetching it with:

fetch('url', {'method': 'post'}).then(e => console.log(e.body))

When I copy the res.body object with a right click, it copies as {} showing that there’s nothing in it. However, in the Network tab, it shows the proper response.Network response

Do I need to add other headers to the request or change the way I’m sending the info in the body? Thanks very much

>Solution :

You can refer to the documentation of fetch() method. It returns a Response object after the Promise is resolved. This Response object is "raw" and contains the data stream of the response, which is the one you are accessing via Response.body.

In order to make use of the stream, you can use some of the existing methods such as blob / text / json, which can convert the stream into a more readable format.

In this case, since it is a JSON object, you can use Response.json() method which will wait until the stream ends and parse it into JSON format.

A sample code for your case would be as follow:

fetch('url', { method: 'post' })
  .then((e) => e.json())
  .then((json) => console.log(json));

Notice that .json() method also returns a Promise! This is why you need to chain your .then() in the Promise.

Leave a Reply