no json data read from axios request to nodejs server

Question

I have a signup page where the user is required to confirm their password. For this, I have created the following axios and server side code to handle the request.

TL;DR using suggested methods found here, and here, and here, I send an axios request with the format:

axios({
    method: 'get',
    url: '/my/server/endpoint',
    data: *json data*
});

and on my nodejs (express) server, I listen for req.body (suggested here, here, here, here) content or req.data (suggested here, here).

Problem:

Simply said, req.body is an empty object and req.data is undefined (see image below).

I have the following express app setup

const app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

app.use(logger('dev'));
app.use(express.json());
app.use(helmet());
app.use(express.urlencoded({extended: false}));
app.use(cookieParser());
app.use('/assets', express.static(path.join(__dirname, '/assets')));
app.use(cors());
app.use(session({secret: config.secret, resave: false, saveUninitialized: false}));
app.use(passport.initialize({}));
app.use(passport.session({secret: config.secret}));
app.use(function(req,res,next){
    res.locals.session = req.session;
    next();
});
app.use(flash());

I can confirm the data sent via the axios request does infact have valid data being sent.

Did I do something wrong?

Client Side Code

$('#btnSetVaultPassword').click(function () {
    $('#btnSetVaultPassword').prop("disabled", true);

    let password = $('#edtVaultPassword');
    let passwordConfirm = $('#edtVaultPasswordConfirm');

    // const data = ;

    axios({
        method: 'get',
        url: '/setup/setup-vault',
        data: {
            password: password.val(),
            passwordConfirm: passwordConfirm.val()
        }
    }).then((result) => {
        if(result.status === true) {
            // set success alert with message
            let alertMessage = document.createElement("div");
            alertMessage.classList.add("alert", "alert-success");
            alert.val(result.message);
            $('.container-fluid').prepend(alertMessage);

            // hide modal
            $('#dialogVault').modal({show: false});

        } else {
            // show message on modal
            $('#vaultMessage').val(result.message);

            // enable setVaultPassword button
            $('#btnSetVaultPassword').prop("disabled", false);
        }
    });
});

Corresponding NodeJS (Express) Server Side code

router.get('/setup-vault',
    async function (req, res, next) {
        let pass = req.body.password;
        let confirmPass = req.body.passwordConfirm;

        if(pass === undefined || pass === "" ||
            confirmPass === undefined || confirmPass === "") {
            res.json({status: false, message: "Password(s) cannot be empty"});
        }

        if(pass !== confirmPass) {
            res.json({status: false, message: "Keys don't match"});
        } else {
            const vaultHash = vault.encrypt(pass, Buffer.from(settingName.vaultSecret));
            await createOrSaveSetting(settingName.vaultSecret, vaultHash);
            // test connection
            res.json({status: true, message: "Vault created"});
        }
    });

Answer 1

I think you have to use a POST method to get data in the body section, if you are using GET, like it's in you code now, you can only get the parameters via URL query strings, you had to do it like this with POST, for you code to work:

Client-Side

$('#btnSetVaultPassword').click(function () {
    $('#btnSetVaultPassword').prop("disabled", true);

    let password = $('#edtVaultPassword');
    let passwordConfirm = $('#edtVaultPasswordConfirm');

    // const data = ;

    axios({
        method: 'post',
        url: '/setup/setup-vault',
        data: {
            password: password.val(),
            passwordConfirm: passwordConfirm.val()
        }
    }).then((result) => {
        if(result.status === true) {
            // set success alert with message
            let alertMessage = document.createElement("div");
            alertMessage.classList.add("alert", "alert-success");
            alert.val(result.message);
            $('.container-fluid').prepend(alertMessage);

            // hide modal
            $('#dialogVault').modal({show: false});

        } else {
            // show message on modal
            $('#vaultMessage').val(result.message);

            // enable setVaultPassword button
            $('#btnSetVaultPassword').prop("disabled", false);
        }
    });
});

and the Server-Side:

router.post('/setup-vault',
    async function (req, res, next) {
        let pass = req.body.password;
        let confirmPass = req.body.passwordConfirm;

        if(pass === undefined || pass === "" ||
            confirmPass === undefined || confirmPass === "") {
            res.json({status: false, message: "Password(s) cannot be empty"});
        }

        if(pass !== confirmPass) {
            res.json({status: false, message: "Keys don't match"});
        } else {
            const vaultHash = vault.encrypt(pass, Buffer.from(settingName.vaultSecret));
            await createOrSaveSetting(settingName.vaultSecret, vaultHash);
            // test connection
            res.json({status: true, message: "Vault created"});
        }
    });

If you intend to use the GET method you should use the query string option in the server side, and change the client-side to use params in the place of data in your Axios request.