vue2前端使用axios发起post请求,后端(springboot)拿不到值解决办法

一、错误回现(前后端错误演示)

axios封装-我常用的请求头参数 application/json; charset=utf-8

vue2前端使用axios发起post请求,后端(springboot)拿不到值解决办法_第1张图片

页面登录请求-post

vue2前端使用axios发起post请求,后端(springboot)拿不到值解决办法_第2张图片

网络请求正常传入参数

后端代码,查看控制台发现都为null,没取到值。

vue2前端使用axios发起post请求,后端(springboot)拿不到值解决办法_第3张图片

二、解决

1.尝试将前端post请求改成get,其他都不用变

vue2前端使用axios发起post请求,后端(springboot)拿不到值解决办法_第4张图片

vue2前端使用axios发起post请求,后端(springboot)拿不到值解决办法_第5张图片

vue2前端使用axios发起post请求,后端(springboot)拿不到值解决办法_第6张图片

发现正常取到值,打印输出正常。前端页面正常跳转。

2.后端设置为post请求,前端axios要配置请求头参数

vue2前端使用axios发起post请求,后端(springboot)拿不到值解决办法_第7张图片

还要再对数据再进行一次格式化(qs)

vue2前端使用axios发起post请求,后端(springboot)拿不到值解决办法_第8张图片

然后再去验证

vue2前端使用axios发起post请求,后端(springboot)拿不到值解决办法_第9张图片

后端控制台正常输出。

三、结论

vue2前端使用axios发起post请求,后端(springboot)拿不到值解决办法_第10张图片

vue2前端使用axios发起post请求,后端(springboot)拿不到值解决办法_第11张图片

后来查阅资料发现,只要我们前端只要传入对象格式的参数时,axios就会对我们的数据进行JSON.stringify的操作。也就是说,将我们的 Content-Type 变成了 application/json;charset=utf-8。
axios 使用 post 发送数据时,默认是直接把 json 放到请求体中提交到后端的。

而后端接口使用@RequestParam注解就必须设置axios的请求头为 application/x-www-form-urlencoded

vue2前端使用axios发起post请求,后端(springboot)拿不到值解决办法_第12张图片

@RequestParam接收的参数是来自HTTP请求体( Content-Type必须为 'application/x-www-form-urlencoded )

httpService.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

列出以下其他的值

httpService.defaults.headers['Content-Type'] = 'application/json; charset=utf-8';

上传图片最好是单独封装一个

export function fileUpload(url, params = {}) {
    return new Promise((resolve, reject) => {
        httpService({
            url: url,
            method: 'post',
            data: params,
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        }).then(response => {
            resolve(response);
        }).catch(error => {
            reject(error);
        });
    });
}

分享就到这里了~~~~

你可能感兴趣的:(vue.js,前端,javascript,前端框架,spring,java)