Axios post request from react results in empty or weird body

Question

Working on my first MERN stack application. I'm trying to make an axios post request from my React client (port 3000) to my MongoDB API (port 3001). My post request code is:

<button
        onClick={() => {
          axios({
            method: "post",
            url:
              "http://localhost:3000/api/update/documentID",
            data: { newNumber: 12345 },
            headers: { "Content-Type": "application/x-www-form-urlencoded" }
          });
        }}
      >
        Click to run axios post request
</button>

This results in a body showing up on my port 3001 server as:

body: { '{"newNumber":12345}': '' }

I have my React proxy server set up and body-parser installed on my port 3001 server. I'm able to make the exact request I want using Postman. I can also get exactly what I want by replacing my Button in React with a Form, but obviously having to submit a form to make a post request isn't ideal.

(Also, if I try to use axios.post(etc) instead of axios({ method: post, etc.), I end up with an entirely empty body.

Any help would be appreciated.

WARNING: If you're using Postman, ensure the request has properly set the Content-Type: application/json and using the raw format in the Body tab and not the x-www-form-urlencoded. — cpinamtz
– cpinamtz, Commented Aug 24, 2021 at 14:07

Richard C. · Accepted Answer · 2018-08-05 21:07:19Z

1

Answered my own question, changed

headers: { "Content-Type": "application/x-www-form-urlencoded" }

to

headers: { "Content-Type": "application/json" }

and it worked.

answered Aug 5, 2018 at 21:07

Richard C.

113 bronze badges

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

Collectives™ on Stack Overflow

Axios post request from react results in empty or weird body

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related