CODEWITHSUNDEEP
javascriptnode.jsexpressvue.js
peyman gilmour
peyman gilmour

Reputation: 1218

Post request in VueJs with undefined response

I am a beginner in VueJs and Expressjs. I am trying to make frontend side by Vuejs and backend by ExpressJs. I send a post request to the backend (expressJs) and :

1- Response is undefined 2- At the same time I can see 2 requests in chrome development tools. One is Option and another one is Post. 3- With postman there is no problem at all.

enter image description here

Here is the code of app.js in express

console.log('Server is running')

const express = require('express'),
    bodyParser = require('body-parser'),
    cors = require('cors'),
    morgan = require('morgan');

app = new express();

//Setup middleware
app.use(cors());
app.use(morgan('combined'))
app.use(bodyParser.json())

app.post('/register', (req, res, next) => {
    res.send({
        message: `Hello ${req.body.email}! your user was registered!`
    })
});

app.listen(8081);

And here is the code in VueJs :

// Api Setting

import axios from 'axios'

export const HTTP = axios.create({
    baseURL: `http://localhost:8081`
  });



// AuthenticationService

import { HTTP } from '../services/Api'

export default {

  register(credentials) {
     HTTP.post('register', credentials);
  }
}



// Register Component 
export default {
  data() {
    return {
      email: '',
      password: ''
    };
  },
  methods: {
   
   async register() {
        const response = await AuthenticationService.register({
        email: this.email,
        password: this.password
      });

      console.log(response);  // the value is undefined
    }
  }
};

I really don't know what I missed here that I get an undefined response and 2 requests at the same time. I appreciate any hint.

Whole code on github repo : here

Upvotes: 1

Views: 1215

Answers (2)

Mustansir Zia
Mustansir Zia

Reputation: 1004

Maybe. Authentication.register is not returning anything or more specifically a Promise which should be used to populate const response in the await call.

Try returning something like so: return HTTP.post('register', credentials); inside register.

For this to work though, HTTP.post('register', credentials) should also return something.

Upvotes: 1

Gregory Bleiker
Gregory Bleiker

Reputation: 654

I use JSON.stringify to send the data, you are sending the objects directly, so 

register(credentials) {
    HTTP.post('register', credentials);
}

becomes

register(credentials) {
    HTTP.post('register', JSON.stringify(credentials));
}

Upvotes: 1

Related Questions