#node.js #express #vue.js
#node.js #экспресс #vue.js
Вопрос:
У меня есть запрос axios post на моем интерфейсе Vue, который отправляет некоторые данные в конечную точку API (express). Проблема в том, что я не вижу никаких данных на контроллере, которые получают запрос post.
//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
Я получаю журнал запросов на сервере и «ок» обратно клиенту, но я получаю undefined в console.log (запрос.данные);
//vue 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);
});
Ответ №1:
Для получения данных json на серверной части вам необходимо настроить анализатор. Вы могли бы использовать body-parser. Тогда ваш код должен выглядеть следующим образом
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
Клиент должен выглядеть следующим образом:
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);
});
Если ваша маршрутизация на сервере настроена правильно, это должно сработать.
Комментарии:
1. Начиная с Express версии 4.16.0 , нет необходимости использовать body-parser , если вы собираетесь анализировать
json
илиurlencoded
полезные нагрузки. Синтаксический анализ этих двух теперь реализован как встроенные промежуточные программы: express.json() и express.urlencoded()
Ответ №2:
Вам нужен анализатор тела, чтобы использовать данные json в node и express. Итак, чтобы заставить ваш код работать. Сначала установите body-parser с помощью команды ‘npm install body-parser’, затем используйте его в качестве промежуточного программного обеспечения в вашем коде, как показано ниже:
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 () {})
В 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
Ваш клиент переднего плана должен содержать следующий код:
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);
});
Примечание:: Если вы используете более высокую версию express, то есть v4.16.0, то вместо использования bodyParser.json()
and bodyParser.urlencoded()
вы можете использовать express.json()
and express.urlencoded()
, поскольку это встроенное промежуточное программное обеспечение express версии v4.16.0. Так что выбирайте с умом,
app.use(express.json())
app.use(express.urlencoded())