Vuejs2 通过axios（Vuex）进行post请求时，计算对象未定义

我已经在localhost/send上使用post方法和localhost上的vue应用程序设置了node express服务器

Vue应用程序运行完美，即使在远程机器上也是如此

Post请求需要json对象，它通过NodeEmailer发送邮件。 当我通过邮递员应用程序发出发帖请求时，它就起作用了

当我想通过Vue应用程序（axios）发送邮件以发出发帖请求时出现问题。我将整个电子邮件数据存储在Vuex中，并使用“computed”在我的组件中使用它。我可以渲染数据，但在我的电子邮件中，所有数据都未定义

我做错了什么

代码如下：

节点服务器

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: <a href="tel:${email.phone}">${email.phone}</a></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));
  });

Vue组件

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);
        });
    },
  },
};

---

好的，我刚发现问题出在哪里。当您通过axios发出请求时，您应该使用对象作为有效负载，而不是已经加密的数据。

好的，我刚刚发现了问题所在。当您通过axios发出请求时，您应该使用对象作为有效负载，而不是已加密的数据。

在devtools网络面板中，网络请求是什么样子的？我特别好奇的是，在devtool的网络条目中看到该帖子的请求有效负载request@Parshant数据在哪里没有定义？我用你的代码创建了服务器，一切正常。devtools网络面板中的网络请求是什么样子的？我特别好奇在devtool的网络条目中看到该帖子的请求负载request@Parshant数据到底在哪里未定义？我根据您的代码创建了服务器，一切正常。

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);
        });
    },
  },
};