The req.body is empty in node.js sent from react

Question

I create an app in react. I am trying to use fetch with a post to a different port of localhost. I received the req on the server, but my body is empty. Why my body is empty? I don't understand.

Code in React function:

export default function Sending() {
    async function handleSubmit(e) {
          e.preventDefault()
          try{
              let result = await fetch('http://localhost:5000',{
                method: 'post',
                mode: 'no-cors',
                headers: {
                  'Accept': 'application/json',
                  'Content-type': 'application/json',
                },
                body: JSON.stringify({ email: 'example@gmail.com' })
              })
    
              console.log(result)
          } catch (error){
            console.log(error)
          }
    }
 return (
    <>
      Have a Form here
    </>
  )
}

the console log of browser:

 Response {type: "opaque", url: "", redirected: false, status: 0, ok: false, …} body: null bodyUsed: false headers: Headers {} ok: false redirected: false status: 0 statusText: "" type: "opaque" url: "" __proto__: Response

my simple server hold on node.js:

const express = require('express')
const bodyParser = require('body-parser')
const app = express()
const port = process.env.PORT || 5000

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.post('/', (req, res) => {
  console.log(req.body)
  res.send("Hello")
})

app.get('/hello', (req, res) => {
  res.send("Hello, Benny")
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

Answer 1

Consider installing cors and add it to your code such as shown bellow

const cors = require('cors')

app.use(cors())

Then with the help of morgan

const morgan = require('morgan');

Consider reading a previous similar case as shown here Express JS is receiving an empty req.body from ReactJS

Answer 2

1. You are trying to post JSON
2. To do that you need to set a 'Content-type': 'application/json' request header
3. This is only allowed on a cross-origin request when you have permission from CORS (from a preflight request).
4. You said mode: 'no-cors' , a declaration that you do not have or want permission to do anything from CORS, so the browser will silently ignore anything that needs CORS permission
5. The request arrives at the server without 'Content-type': 'application/json' so the body-parser doesn't know that it needs to decode the JSON

---

You need to:

• Remove mode: 'no-cors'
• Configure the server to support CORS including for preflight requests

This is most easily done with the cors module

const cors = require('cors')
const app = express()

const corsOptions = {
  origin: 'http://example.com',
}

const configuredCors = cors(corsOptions);

app.options('*', configuredCors)

app.post('/', configuredCors, (req, res) => {
  console.log(req.body)
  res.send("Hello")
})

Answer 3

From the first glacne; you are sending over a string with the stringify. Node body-parser trys to parse the json. Try removing the stringify and just sending the object over.