CODEWITHSUNDEEP
javascriptnode.jsreactjshttpaxios
Sarthak Kundra
Sarthak Kundra

Reputation: 95

Node.js REST endpoint not catching parameters passed from axios request

I'm making a POST request from a React front-end using axios to an endpoint to save some data to my DB (MongoDB). I'm getting an error that one cannot read property 'name' of undefined. I think that's occurring because req.body is undefined but I can't understand what's wrong with my axios request. I logged all the parameters and they are there (not undefined). The axios request and the endpoint are written below. Any help will be appreciated. Thanks!

Axios Request

const uploadElement = async (name, HTMLCode, JSCode, CSSCode, screenshot) => {
console.log(name)
  try {

    await axios({
      method: 'post',
      url: '/api/elements',
      data: {
        name: name,
        HTMLCode,
        JSCode,
        CSSCode,
        screenshot
      }
    });
  } catch (e) {
      console.log(e);
  }
}

Endpoint for POST Request

router.post("/", upload.single("screenshot"), async (req, res) => {
  try {
    const newElement = new Element({
      name: req.body.name,
      JSCode: req.body.JSCode,
      HTMLCode: req.body.HTMLCode,
      CSSCode: req.body.CSSCode,
      screenshot: req.file.buffer,
    });

    await newElement.save();
    res.send("Data uploaded successfully!");
  } catch (e) {
    console.error(e);
  }
});

Server.js

const express = require("express");
const passport = require("passport");
const session = require("express-session");
const cors = require('cors');

const elementRouter = require("./routes/elementRoute");
const authRouter = require("./routes/authRoute");

const connectDB = require("./config/db");

const app = express();

const port = process.env.PORT || 5000;
connectDB();

app.use(
  session({
    secret: "googleOAuth",
    resave: false,
    saveUninitialized: true,
  })
);

app.use(cors());

// Passport Config
require("./config/passport")(passport);
app.use(passport.initialize());
app.use(passport.session());

app.use("/api/elements", elementRouter);
app.use("/api/auth", authRouter);

app.listen(port, () => {
  console.log(`Server is up on port ${port}`);
});

Upvotes: 1

Views: 151

Answers (1)

Shmili Breuer
Shmili Breuer

Reputation: 4147

You need to install and require body-parser in your serverside code

First run npm i --save body-parser

Then require it like this

const bodyParser = require("body-parser");

Then use it after you declare your app ( after this line const app = express();)

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

This makes the data of your request available in req.body

Upvotes: 1

Related Questions