Question

我有一个基本的Bootstrap-Vue表单，我正在尝试将Axios的表单数据发布到Express。

但是，此刻我的请求正文响应看起来像这样：body: { '{"name":"","country":"","message":""}': '' }

我真的非常感谢帮助我解决此问题的方法。我似乎无法弄清楚这一点。

表格：

<b-form @submit="onSubmit">
<b-form-input v-model="form.name" required></b-form-input>
<b-form-input v-model="form.country" required></b-form-input>
<b-form-input v-model="form.message" required></b-form-input>

方法：

  methods: {
    onSubmit (evt) {
      evt.preventDefault()
      axios.postForm(this.form)
    }
  }

Axios：

const AXIOS = axios.create({
    baseURL: 'http://localhost:8081', // I'm running my node server here
    timeout: 5000,
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
});

export default {
    postForm (form) {
        return AXIOS.post(`/newmessage/`, form)
    }
};

快递：

// ..require stuff here

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

app.post('/newmessage/', (req, res) => {
    console.log(req.body)
});

Answer 1

已解决：

方法：

  methods: {
    onSubmit (evt) {
      evt.preventDefault()
      axios.postForm(JSON.stringify(this.form))
    }
  }

Axios：

const AXIOS = axios.create({
    baseURL: 'http://localhost:8081',
    timeout: 5000,
    headers: { 'Content-Type': 'application/json' }
});

快递：

app.use(bodyParser.json());

使用Axios将Vue前端与表单数据一起发布到Express后端

1 个答案: