vue2前端使用axios發(fā)起post請求后端(springboot)接收不到值解決辦法
一、錯誤回現(xiàn)（前后端錯誤演示）
axios封裝-我常用的請求頭參數(shù) application/json; charset=utf-8
頁面登錄請求-post
網(wǎng)絡(luò)請求正常傳入?yún)?shù)
后端代碼，查看控制臺發(fā)現(xiàn)都為null，沒取到值。
二、解決
1.嘗試將前端post請求改成get,其他都不用變
發(fā)現(xiàn)正常取到值，打印輸出正常。前端頁面正常跳轉(zhuǎn)。
2.后端設(shè)置為post請求，前端axios要配置請求頭參數(shù)
還要再對數(shù)據(jù)再進行一次格式化（qs）
然后再去驗證
后端控制臺正常輸出。
三、結(jié)論
后來查閱資料發(fā)現(xiàn)，只要我們前端只要傳入對象格式的參數(shù)時，axios就會對我們的數(shù)據(jù)進行JSON.stringify的操作。也就是說，將我們的 Content-Type 變成了 application/json;charset=utf-8。
axios 使用 post 發(fā)送數(shù)據(jù)時，默認是直接把 json 放到請求體中提交到后端的。
而后端接口使用@RequestParam注解就必須設(shè)置axios的請求頭為 application/x-www-form-urlencoded
@RequestParam接收的參數(shù)是來自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發(fā)起post請求后端(springboot)取不到值解決辦法的詳細內(nèi)容，更多關(guān)于vue2發(fā)起post請求后端取不到的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
本篇文章主要介紹了Vue.js父與子組件之間傳參示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
Vue3?Composition?API優(yōu)雅封裝第三方組件實例
這篇文章主要為大家介紹了Vue3?Composition?API優(yōu)雅封裝第三方組件實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
最近在學(xué)習(xí)vue,感覺路由守衛(wèi)這個地方知識點挺多的,而且很重要,下面這篇文章主要給大家介紹了關(guān)于vue3中7種路由守衛(wèi)的使用大全,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-03-03
本篇文章主要介紹了vue模擬加載更多功能（數(shù)據(jù)追加），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了Vue中點擊url下載文件案例詳解，此文需要注意若是文件的url存在跨域的情況，則可能會下載失敗，因為fetch請求連接后，由于跨域，拿不到資源，也就無法執(zhí)行后續(xù)的操作，此時是失敗的,詳細內(nèi)容跟隨小編一起看看吧2022-04-04
Vue單頁面應(yīng)用保證F5強刷不清空數(shù)據(jù)的解決方案
最近小編遇到這樣的問題當vue單頁面按F5強刷，數(shù)據(jù)就恢復(fù)初始了，這怎么辦呢？下面小編給大家?guī)砹薞ue單頁面應(yīng)用保證F5強刷不清空數(shù)據(jù)的解決方案，感興趣的朋友一起看看吧2018-01-01
本文通過實例給大家介紹了Vue中使用webpack別名的方法,非常不錯，具體一定的參考借鑒價值，需要的朋友可以參考下2018-06-06
這篇文章主要給大家介紹了關(guān)于前端JS連點成線(Vue中運用?AntVG6)的相關(guān)資料,文中通過實例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-01-01
對axios進行封裝以及將API接口按業(yè)務(wù)模塊統(tǒng)一管理，有助于我們簡化代碼，方便后期維護。本文介紹了如何用vue封裝axios請求，感興趣的同學(xué)，可以參考下。2021-06-06
這篇文章主要為大家介紹了Vue中使用Swiper簡單封裝組件示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08