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