link0 link1 link2 link3 link4 link5 link6 link7 link8 link9 link10 link11 link12 link13 link14 link15 link16 link17 link18 link19 link20 link21 link22 link23 link24 link25 link26 link27 link28 link29 link30 link31 link32 link33 link34 link35 link36 link37 link38 link39 link40 link41 link42 link43 link44 link45 link46 link47 link48 link49 link50 link51 link52 link53 link54 link55 link56 link57 link58 link59 link60 link61 link62 link63 link64 link65 link66 link67 link68 link69 link70 link71 link72 link73 link74 link75 link76 link77 link78 link79 link80 link81 link82 link83 link84 link85 link86 link87 link88 link89 link90 link91 link92 link93 link94 link95 link96 link97 link98 link99 link100 link101 link102 link103 link104 link105 link106 link107 link108 link109 link110 link111 link112 link113 link114 link115 link116 link117 link118 link119 link120 link121 link122 link123 link124 link125 link126 link127 link128 link129 link130 link131 link132 link133 link134 link135 link136

[Vue.js] Can't receive data from axios on API

there is an axios post request on my vue.js frontend which sends some data to an API endpoint (express). The problem is that I can’t see any data on the controller that receive the post request.

//app.js

var express = require(‘express’)
var cors = require(‘cors’)
var app = express()
var port = process.env.port || 1337

app.use(cors({origin: true}));
var imagenmatriculaController = require(‘./controllers/imagenmatriculaController.js’)()

app.use(“/api/imagenmatricula”, imagenmatriculaController)

app.listen(port, function () {})

//imagenmatriculaController.js

var express = require(‘express’)
var router = express.Router()
var routes = function (){
router.route(‘/‘)
.post(function(req,res){

console.log(req.data)
res.json(‘ok’)
})
return router
}

module.exports = routes

I do receive the request log on the server and the ‘ok’ back to the client but I get an undefined on the console.log(req.data);

//vue.js post

var headers = {
‘Content-Type’: ‘application/json;charset=UTF-8’,
‘Access-Control-Allow-Origin’: ‘*‘
};

axios.post(‘http://localhost:1337/api/imagenmatricula', {
headers: headers,
data: ‘test’
})
.then(response => {
console.log(response);
}).catch(error => {
console.log(error);
console.log(‘ERROR::’, error.response.data);
});

Solution :

In order to receive json data on backend you need to setup parser. You could use body-parser. Then the code should look like this

var express = require(‘express’)
var cors = require(‘cors’)
var app = express()
var port = process.env.port || 1337
var bodyParser = require(‘body-parser’)

app.use(cors({origin: true}));
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))

// parse application/json
app.use(bodyParser.json())
var imagenmatriculaController = require(‘./controllers/imagenmatriculaController.js’)()

app.use(“/api/imagenmatricula”, imagenmatriculaController)

app.listen(port, function () {})

//imagenmatriculaController.js

var express = require(‘express’)
var router = express.Router()
var routes = function (){
router.route(‘/‘)
.post(function(req,res){

console.log(req.body)
res.json(‘ok’)
})
return router
}

module.exports = routes

Client should look like this:

var headers = {
‘Content-Type’: ‘application/json;charset=UTF-8’,
‘Access-Control-Allow-Origin’: ‘*‘
};

axios.post(‘http://localhost:1337/api/imagenmatricula', {
headers: headers,
data: { test: ‘test’ }
})
.then(response => {
console.log(response);
}).catch(error => {
console.log(error);
console.log(‘ERROR::’, error.response.body);
});

If the routing on server is correctly setup, this should work.

Solution 2:

You need to have body-parser in order to use json data in node and express. So in order to make the code work. First install body-parser through ‘npm install body-parser’ command then use it as middleware in the code as shown below:

var express = require(‘express’)
var cors = require(‘cors’)
var app = express()
var port = process.env.port || 1337
var bodyParser = require(‘body-parser’)

app.use(cors({origin: true}));

//It will parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))

//It will parse application/json
app.use(bodyParser.json())

var imagenmatriculaController = require(‘./controllers/imagenmatriculaController.js’)()

app.use(“/api/imagenmatricula”, imagenmatriculaController)

app.listen(port, function () {})

In imagenmatriculaController.js write,

var express = require(‘express’)
var router = express.Router()
var routes = function (){
router.route(‘/‘)
.post(function(req,res){

console.log(req.body)
res.json(‘ok’)
})
return router
}

module.exports = routes

the front end client should contain following code:

var headers = {
‘Content-Type’: ‘application/json;charset=UTF-8’,
‘Access-Control-Allow-Origin’: ‘*‘
};

axios.post(‘http://localhost:1337/api/imagenmatricula', {
headers: headers,
data: { test: ‘test’ }
})
.then(response => {
console.log(response);
}).catch(error => {
console.log(error);
console.log(‘ERROR::’, error.response.body);
});

Note:: If you are using higher version of express i.e v4.16.0 then instead of using bodyParser.json() and bodyParser.urlencoded() you can use express.json() and express.urlencoded() because it is built-in middleware of express from version v4.16.0. So choose wisely,

app.use(express.json())
app.use(express.urlencoded())