前端POST提交数据后端数据为null

问题复现

后端用户登录接口接受数据

对数据进行校验

前端发送数据

数据确实发送了

 但是后端数据为空

解决方法

将Content-Type: application/json改为Content-Type: multipart/form-data

 成功解决

POST提交数据的三种请求方式写法

Content-Type: application/json

 let data={'userNumber':this.userNumber,"userPassword":this.userPassword,"code":this.code,"key":this.key}
        this.$axios.post('/login/userLogin', data)
                .then(response => {
                console.log(response.data.data);
                })
                .catch(error => {
                console.error(error);
            }); 

Content-Type: multipart/form-data

    let data = new FormData();
        data.append('userNumber',this.userNumber);
        data.append('userPassword',this.userPassword);
        data.append('code',this.code);
        data.append('key',this.key);
        this.$axios.post('/login/userLogin', data)
                .then(response => {
                console.log(response.data.data);
                this.imgUrl=response.data.data.img
                this.key=response.data.data.key
                })
                .catch(error => {
                console.error(error);
            }); 

Content-Type: application/x-www-form-urlencoded

import qs from 'Qs'
 let data={'userNumber':this.userNumber,"userPassword":this.userPassword,"code":this.code,"key":this.key}
this.$axios.post('/login/userLogin', qs.stringify({
    data
}))
                .then(response => {
                console.log(response.data.data);
                this.imgUrl=response.data.data.img
                this.key=response.data.data.key
                })
                .catch(error => {
                console.error(error);
            });