vue2前端使用axios發(fā)起post請(qǐng)求后端(springboot)接收不到值解決辦法
一、錯(cuò)誤回現(xiàn)（前后端錯(cuò)誤演示）
axios封裝-我常用的請(qǐng)求頭參數(shù) application/json; charset=utf-8
頁(yè)面登錄請(qǐng)求-post
網(wǎng)絡(luò)請(qǐng)求正常傳入?yún)?shù)
后端代碼，查看控制臺(tái)發(fā)現(xiàn)都為null，沒(méi)取到值。
二、解決
1.嘗試將前端post請(qǐng)求改成get,其他都不用變
發(fā)現(xiàn)正常取到值，打印輸出正常。前端頁(yè)面正常跳轉(zhuǎn)。
2.后端設(shè)置為post請(qǐng)求，前端axios要配置請(qǐng)求頭參數(shù)
還要再對(duì)數(shù)據(jù)再進(jìn)行一次格式化（qs）
然后再去驗(yàn)證
后端控制臺(tái)正常輸出。
三、結(jié)論
后來(lái)查閱資料發(fā)現(xiàn)，只要我們前端只要傳入對(duì)象格式的參數(shù)時(shí)，axios就會(huì)對(duì)我們的數(shù)據(jù)進(jìn)行JSON.stringify的操作。也就是說(shuō)，將我們的 Content-Type 變成了 application/json;charset=utf-8。
axios 使用 post 發(fā)送數(shù)據(jù)時(shí)，默認(rèn)是直接把 json 放到請(qǐng)求體中提交到后端的。
而后端接口使用@RequestParam注解就必須設(shè)置axios的請(qǐng)求頭為 application/x-www-form-urlencoded
@RequestParam接收的參數(shù)是來(lái)自HTTP請(qǐng)求體( 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';
上傳圖片最好是單獨(dú)封裝一個(gè)
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發(fā)起post請(qǐng)求后端(springboot)取不到值解決辦法的詳細(xì)內(nèi)容，更多關(guān)于vue2發(fā)起post請(qǐng)求后端取不到的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue3.0 自己實(shí)現(xiàn)放大鏡效果案例講解
這篇文章主要介紹了Vue3.0 自己實(shí)現(xiàn)放大鏡效果案例講解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-07-07
Vue-DPlayer是一個(gè)易于使用、高性能的基于Vue.js的視頻播放器組件,本文給大家介紹Vue DPlayer詳細(xì)使用,本文將從四個(gè)方面對(duì)Vue-DPlayer進(jìn)行詳細(xì)的闡述,感興趣的朋友一起看看吧2023-10-10
vue3項(xiàng)目vite.config.js配置代理、端口、打包名以及圖片壓縮
這篇文章主要給大家介紹了關(guān)于vue3項(xiàng)目vite.config.js配置代理、端口、打包名以及圖片壓縮的相關(guān)資料,因?yàn)?.0版本中vue已經(jīng)內(nèi)置了很多關(guān)于webpack的配置,一般情況下開(kāi)箱即用,需要修改則可以在vue.config.js文件中完成,需要的朋友可以參考下2023-12-12
本文通過(guò)實(shí)例代碼給大家介紹了vue仿百度搜索功能，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-02-02
Vue3+Element-plus項(xiàng)目自動(dòng)導(dǎo)入報(bào)錯(cuò)的解決方案
vue3出來(lái)一段時(shí)間了,element也更新了版本去兼容vue3,下面這篇文章主要給大家介紹了關(guān)于Vue3+Element-plus項(xiàng)目自動(dòng)導(dǎo)入報(bào)錯(cuò)的解決方案,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
非Vuex實(shí)現(xiàn)的登錄狀態(tài)判斷封裝實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于非Vuex實(shí)現(xiàn)的登錄狀態(tài)判斷封裝的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-02-02
vant組件中 dialog的確認(rèn)按鈕的回調(diào)事件操作
這篇文章主要介紹了vant組件中 dialog的確認(rèn)按鈕的回調(diào)事件操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
解決Vue開(kāi)發(fā)中對(duì)話(huà)框被遮罩層擋住的問(wèn)題
在Vue的開(kāi)發(fā)中，一旦我們用到對(duì)話(huà)框，經(jīng)常出現(xiàn)的問(wèn)題是對(duì)話(huà)框被遮罩層擋住,怎么來(lái)解決這個(gè)問(wèn)題呢？下面小編給大家?guī)?lái)了Vue開(kāi)發(fā)中對(duì)話(huà)框被遮罩層擋住的問(wèn)題及解決方法，一起看看吧2018-11-11
詳解vue中父子組件傳遞參數(shù)props的實(shí)現(xiàn)方式
這篇文章主要給大家介紹了在vue中，父子組件傳遞參數(shù)?props?實(shí)現(xiàn)方式，文章通過(guò)代碼示例介紹的非常詳細(xì)，對(duì)我們的學(xué)習(xí)或工作有一定的參考價(jià)值,需要的朋友可以參考下2023-07-07
vue實(shí)現(xiàn)全匹配搜索列表內(nèi)容
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)全匹配搜索列表內(nèi)容，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09