看下面一个例子
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());