'Axios post method is sending a object with my data as the key and empty value rather than the whole data object itself

I made the frontend first and now I'm want to make the backend so I can connect to a database.

const express = require("express");
const bodyParser = require("body-parser");
const cors = require("cors");
const app = express();
app.use(cors());
app.use(bodyParser.urlencoded({ extended: true }));

app.get("/", function (req, res) {
  res.send("hello");
});
app.post("/", function (req, res) {
  console.log(req.body);
});
app.listen(3001, function () {
  console.log("listening on 3001");
});

And this is the request I'm making on my React frontend.

axios.post("http://localhost:3001/", JSON.stringify(note));

note is an object like {title: "",content: ""} the empty string gets filled out with submission data.

When I make the post request this is what gets logged in the console

{ '{"title":"test","content":"one"}': '' }

I had to use JSON.stringify() to show what's being passed through but without it, my output is {}

When my object is posted it becomes the key of an object with empty values.

What I want to do is simply send the whole object like so

axios.post("http://localhost:3001/", note); 

so that in the backend I can tap into the values by doing req.body.title and req.body.content.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source