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

无语堵上西楼

已于 2024-04-08 20:50:35 修改

阅读量630

点赞数 6

分类专栏： vue 文章标签：前端

于 2024-03-11 12:11:14 首次发布

本文链接：https://blog.csdn.net/qq_63431773/article/details/136619624

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

问题复现

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

对数据进行校验

前端发送数据

数据确实发送了

但是后端数据为空

解决方法

将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);
            });