Не удается получить данные от axios через API

#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())