vue2前端使用axios发起post请求后端(springboot)接收不到值解决办法
一、错误回现（前后端错误演示）
axios封装-我常用的请求头参数 application/json; charset=utf-8
页面登录请求-post
网络请求正常传入参数
后端代码，查看控制台发现都为null，没取到值。
二、解决
1.尝试将前端post请求改成get,其他都不用变
发现正常取到值，打印输出正常。前端页面正常跳转。
2.后端设置为post请求，前端axios要配置请求头参数
还要再对数据再进行一次格式化（qs）
然后再去验证
后端控制台正常输出。
三、结论
后来查阅资料发现，只要我们前端只要传入对象格式的参数时，axios就会对我们的数据进行JSON.stringify的操作。也就是说，将我们的 Content-Type 变成了 application/json;charset=utf-8。
axios 使用 post 发送数据时，默认是直接把 json 放到请求体中提交到后端的。
而后端接口使用@RequestParam注解就必须设置axios的请求头为 application/x-www-form-urlencoded
@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);
});
});
}以上就是vue2前端使用axios发起post请求后端(springboot)取不到值解决办法的详细内容，更多关于vue2发起post请求后端取不到的资料请关注脚本之家其它相关文章！
相关文章
本篇文章主要介绍了Vue.js父与子组件之间传参示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
Vue3 Composition API优雅封装第三方组件实例
这篇文章主要为大家介绍了Vue3 Composition API优雅封装第三方组件实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
最近在学习vue,感觉路由守卫这个地方知识点挺多的,而且很重要,下面这篇文章主要给大家介绍了关于vue3中7种路由守卫的使用大全,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-03-03
本篇文章主要介绍了vue模拟加载更多功能（数据追加），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要介绍了Vue中点击url下载文件案例详解，此文需要注意若是文件的url存在跨域的情况，则可能会下载失败，因为fetch请求连接后，由于跨域，拿不到资源，也就无法执行后续的操作，此时是失败的,详细内容跟随小编一起看看吧2022-04-04
最近小编遇到这样的问题当vue单页面按F5强刷，数据就恢复初始了，这怎么办呢？下面小编给大家带来了Vue单页面应用保证F5强刷不清空数据的解决方案，感兴趣的朋友一起看看吧2018-01-01
本文通过实例给大家介绍了Vue中使用webpack别名的方法,非常不错，具体一定的参考借鉴价值，需要的朋友可以参考下2018-06-06
这篇文章主要给大家介绍了关于前端JS连点成线(Vue中运用 AntVG6)的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2023-01-01
对axios进行封装以及将API接口按业务模块统一管理，有助于我们简化代码，方便后期维护。本文介绍了如何用vue封装axios请求，感兴趣的同学，可以参考下。2021-06-06
这篇文章主要为大家介绍了Vue中使用Swiper简单封装组件示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
最新评论