Computed object is undefined when post requesting via axios (Vuex) - vuejs2

Question

I've set up a node express server with post method on localhost/send and vue app on localhost.
Vue app is working perfect, even on remote machine.
Post request requires json object and it sends an mail via nodemailer.
It works when I make post request via postman app.
Problem appears when I want to send email making post request via Vue app (axios). I store whole email data in Vuex and use "computed" to use it in my component. I can render data, but in my email whole data is undefined.
What am I doing wrong?
Code below:
node server
const express = require('express');
const bodyParser = require('body-parser');
const nodemailer = require('nodemailer');
const path = require('path');
const app = express();
app.use('/', express.static(path.join(__dirname, 'render')));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname+'/render/index.html'));
});
app.post('/send', (req, res) => {
const email = {
name: req.body.name,
email: req.body.email,
phone: req.body.phone,
startPoint: req.body.startPoint,
endPoint: req.body.endPoint,
dateTime: req.body.dateTime
};
// create reusable transporter object using the default SMTP transport
let transporter = nodemailer.createTransport({
host: 'mail.advertidea.pl',
port: 587,
secure: false, // true for 465, false for other ports
auth: {
user: 'emailIsCorrect', // generated ethereal user
pass: 'passIsCorrect' // generated ethereal password
},
tls:{
rejectUnauthorized:false
}
});
// mail for admin
// setup email data with unicode symbols
let adminMailOptions = {
from: '"GoodTransfer" <test#advertidea.pl>', // sender address
to: 'kamil.grzaba#gmail.com', // list of receivers
subject: 'New transfer request', // Subject line
html: `<p>${email.name}, asks for transfer.<p><br>
<p>Transfer details:</p><br><br>
<p>starting point: ${email.startPoint}</p>
<p>ending point: ${email.endPoint}</p>
<p>date and time: ${email.dateTime}</p><br><br>
<p>clients email: ${email.email}</p>
<p>phone number: ${email.phone}</p>` // html body
};
// send mail with defined transport object
transporter.sendMail(adminMailOptions, (error, info) => {
if (error) {
return console.log(error);
}
console.log('Message sent: %s', info.messageId);
console.log('Preview URL: %s', nodemailer.getTestMessageUrl(info));
});
Vuex store
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
email: {
name: '',
email: 'test#test.pl',
phone: '',
startPoint: '',
endPoint: '',
date: new Date().toISOString().substr(0, 10),
},
},
getters: {
email: state => state.email,
},
mutations: {
updateEmail(state, email) {
this.state.email = email;
},
},
actions: {
},
});
Vue component
import axios from 'axios';
export default {
name: 'Book',
data() {
return {
newEmail: '',
valid: false,
emailRules: [
v => !!v || 'E-mail is required',
v => /.+#.+/.test(v) || 'E-mail must be valid',
],
};
},
computed: {
email: {
get() {
return this.$store.state.email;
},
set(value) {
this.$store.commit('updateMessage', value);
},
/* return this.$store.getters.email; */
},
},
methods: {
submitForm() {
console.log(JSON.stringify(this.email));
axios.post('http://goodtransfer.pixelart.pl/send', JSON.stringify(this.email), 'json')
.then((res) => {
console.log(res);
console.log(res.data);
});
},
},
};

Answer 1

Ok, I just found out what was the problem. When You make request via axios You should use object as a payload, not already strigified data.