axios发送POST请求后端接收不到问题

发表于:2018-02-09

看下面一个例子

Node.js模拟接收

router.post('/api',(req, res) => {
    if( req.body.username ) {
        res.json({
            success: true
        })
        return;
    }
    res.json({
        success: false
    })
})

jQuery发送一个POST请求

$.post('/api', {username: 'xjh'}, function(res, textStatus, xhr) {
    // {success: true}
    console.log(res);
}, 'json')

同样的用axios发送一个POST请求

axios.post('/api', {
    username: 'xjh'
})
.then(res => {
    // {success: false}
    console.log(res.data);
})
.catch(e => e);

axios返回了响应信息为{success: false}, 说明后端没有接收到username的字段

遇到这种问题就烦,砸键盘的想法都有

接收不到的一个原因是因为jQuery处理的方式不一样,jQuery是使用Form Data去处理的,而axios是使用JSON的方式去处理


解决方法一

这种方式要玩好,URLSearchParams这个API浏览器支持还不够友好

axios.post('/api', {
    username: 'xjh',
    pwd: 123
}, {
    headers: {
        // 指定Content-Type
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    },
    // 可以在这里将数据处理后发送
    // data参数就是发送的数据 {username: 'xjh', pwd: 123}
    transformRequest: [function (data) {
        var searchParams = new URLSearchParams();
        for(var x in data) {
            searchParams.append(x, data[x]);
        }
        // username=xjh&pwd=123
        return searchParams;
    }]
})
.then(res => {
    console.log(res.data);
})
.catch(e => e);

解决方法二

这种方法不用愁兼容性, 通过for in循环去拼接成字符串然后return出去

axios.post('/api', {
    username: 'xjh',
    pwd: 123
}, {
    headers: {
        // 指定Content-Type
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    },
    // 可以在这里将数据处理后发送
    transformRequest: [function (data) {
        var params = ''
        for (var x in data) {
            params += encodeURIComponent(x) + '=' + encodeURIComponent(data[x]) + '&'
        }
        // username=xjh&pwd=123
        return params;
    }]
})
.then(res => {
    console.log(res.data);
})
.catch(e => e);

后端解决

是因为后端没有处理成JSON才会接收不到 Content-Type: 'application/json'请求

// 在Node.js里面接收JSON请求就好了, 这样的话前端就不需要处理了
app.use(bodyParser.json());
JavaScript
广告