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