Posting form data with Vue frontend with Axios to Express backend

Question

I have a basic bootstrap-vue form and I'm trying to post the form-data with Axios to Express.

Yet, at the moment my req.body response looks like this: body: { '{"name":"","country":"","message":""}': '' }

I would really really appreciate help how I could fix this issue. I can't seem to figure this one out.

Form:

<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>

Method:

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

Express:

// ..require stuff here

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

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

Does this answer your question? [How to access the request body when POSTing using Node.js and Express?](https://stackoverflow.com/questions/11625519/how-to-access-the-request-body-when-posting-using-node-js-and-express) — Lawrence Cherone, Feb 27 '20 at 22:02

Tuuchen · Answer 1 · 2020-02-27T21:57:42.933

0

This was fix:

Method:

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

Express:

app.use(bodyParser.json());

edited Feb 27 '20 at 21:57

answered Feb 27 '20 at 21:34

Tuuchen

57
4
8

Posting form data with Vue frontend with Axios to Express backend

1 Answers1