Fetch api not able to send data from react to express

Question

I am trying to send a object from react to express using fetch api. I have added the data to post request. the express server is unable to receive any request made to it.

React Code:

  const sendData = async ()=>{
    try{
      const response = await  fetch("http://localhost:4000/register",{method:"POST",mode:"cors",body:{"state":"its working"}});
    }
    catch(e){
      console.log(e)
    }
  }
  useEffect(() => {
    console.log("Effect started");
    sendData();
  }, [user]);

Express code


app.route("/register").post((req,res)=>{
  const postData = req.body.state;
  console.log(postData);
});

Kindly help. I am not sure why it is not able to log anything in serverside.

Jay Patel · Accepted Answer · 2023-08-31 13:30:53Z

2

In React App (frontend): add the headers property as following: js headers: { 'Content-Type': 'application/json' } in the api call function. In Express App (backend): add the middleware as following: js app.use(express.json()); which help to parse the json body.

answered Aug 31, 2023 at 13:30

Jay Patel

3042 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Wes Alves · Accepted Answer · 2023-08-31 13:29:41Z

1

You need to convert the body data to JSON before sending it in the request.

    const sendData = async () = {
    ...
    try {
        const response = await fetch("http://localhost:4000/register", {
          method: "POST",
          mode: "cors",
          headers: {
            "Content-Type": "application/json"
          },
          body: JSON.stringify({ state: "its working" })
        });
      } catch (e) {
        console.log(e);
      }
}

In your express code, you can access the state property of the request body using

app.route("/register").post((req, res) => {
  const postData = req.body.state;
  ...
  res.send("Received the data successfully!");
});

answered Aug 31, 2023 at 13:29

Wes Alves

325 bronze badges

Comments

Musab · Accepted Answer · 2023-08-31 13:14:22Z

1

Did you set JSON parse on backend entry file?
Try sending the body from frontend in JSON format. You can use JSON.stringify() to encode it.
Check your browser console and network to confirm the requirements with data to the backend.
Console the req.body to check if there's anything received.

answered Aug 31, 2023 at 13:14

Musab

3202 silver badges11 bronze badges

Collectives™ on Stack Overflow

Fetch api not able to send data from react to express

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related