1

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

0

2 Answers 2

1

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.

Sign up to request clarification or add additional context in comments.

1 Comment

Thanks for the help. Do you know why we have to requests ( option, post ) ? Is it something normal ?
1

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

2 Comments

also, I haven't got the baseurl part... don't know if that has any effect. My code is like axios.post('http://example.com/bla',JSON.stringify(data)).then(
Regarding your question about post/and option... Normally, I would say that axios does not send anything unless you code it. However, there could be some default settings that require an option to be sent before the post is launched. Have a look at the request body in dev tools and see what option has as body

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.