Error description
The front-end sending code is as follows
login() {
let {userCode, userPwd} = this.ruleForm;
// this.$axios.post('/UserInfoService/login',
// this.$qs.stringify({
// account: userCode,
// password: userPwd
// })).then(res => {
// console.log(res);
// })
this.$axios({
method: 'post',
url: '/UserInfoService/login',
data: {
account: userCode,
password: userPwd
}
}).then(res => {
console.log(res);
})
},
The content of the request body is as follows
{account: "111", password: "222"}
account: "111"
password: "222"
Whether the back end splits the attribute or uses the userinfo entity to receive it, it gets null
Cause of error
The reason is that the default sending data format of Axios is JSON format, not form data. As a result, the data passed to the back end is JSON format, and the back end cannot receive it directly. When the result is returned, the data sent by the front end will be passed to the front end
Solution
There are two solutions, as follows
The first is to change the format of the front-end transmission data to form data
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
But this method is not recommended, because the front-end and back-end communication uses the JSON format. The second method is to use the entity class to receive the parameters passed by the front-end, and use @ requestbody to modify the parameters