无法从API上的axios接收数据

Question

我的Vue前端有一个axios post请求，它将一些数据发送到API端点（快速）。问题是我无法在控制器上看到任何接收发布请求的数据。

//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

我确实收到了服务器上的请求日志，然后'ok'回到了客户端，但是我在console.log上得到了一个未定义的日志（req.data）;

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

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

如果您在服务器上的路由设置正确，这应该工作。

Answer 2

你需要有body-parser才能在node和express中使用json数据。所以为了使你的代码工作。首先通过'npm install body-parser'命令安装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()和bodyParser.urlencoded()而不是使用express.json()和express.urlencoded()，因为它是版本v4.16.0中的express的内置中间件。所以明智地选择，

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