vue2前端使用axios發(fā)起post請(qǐng)求后端(springboot)接收不到值解決辦法

更新時(shí)間：2024年03月20日 11:22:06 作者：打工人小夏

這篇文章主要介紹了vue2前端使用axios發(fā)起post請(qǐng)求后端(springboot)接收不到值解決辦法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

一、錯(cuò)誤回現(xiàn)（前后端錯(cuò)誤演示）

axios封裝-我常用的請(qǐng)求頭參數(shù) application/json; charset=utf-8

頁面登錄請(qǐng)求-post

網(wǎng)絡(luò)請(qǐng)求正常傳入?yún)?shù)

后端代碼，查看控制臺(tái)發(fā)現(xiàn)都為null，沒取到值。

二、解決

1.嘗試將前端post請(qǐng)求改成get,其他都不用變

發(fā)現(xiàn)正常取到值，打印輸出正常。前端頁面正常跳轉(zhuǎn)。

2.后端設(shè)置為post請(qǐng)求，前端axios要配置請(qǐng)求頭參數(shù)

還要再對(duì)數(shù)據(jù)再進(jìn)行一次格式化（qs）

然后再去驗(yàn)證

后端控制臺(tái)正常輸出。

三、結(jié)論

后來查閱資料發(fā)現(xiàn)，只要我們前端只要傳入對(duì)象格式的參數(shù)時(shí)，axios就會(huì)對(duì)我們的數(shù)據(jù)進(jìn)行JSON.stringify的操作。也就是說，將我們的 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ù)是來自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)文章

Vue.js父與子組件之間傳參示例
本篇文章主要介紹了Vue.js父與子組件之間傳參示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-02-02
Vue3?Composition?API優(yōu)雅封裝第三方組件實(shí)例
這篇文章主要為大家介紹了Vue3?Composition?API優(yōu)雅封裝第三方組件實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
vue3中7種路由守衛(wèi)的使用大全舉例
最近在學(xué)習(xí)vue,感覺路由守衛(wèi)這個(gè)地方知識(shí)點(diǎn)挺多的,而且很重要,下面這篇文章主要給大家介紹了關(guān)于vue3中7種路由守衛(wèi)的使用大全,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-03-03
詳解vue模擬加載更多功能（數(shù)據(jù)追加）
本篇文章主要介紹了vue模擬加載更多功能（數(shù)據(jù)追加），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-06-06
Vue中點(diǎn)擊url下載文件的案例詳解
這篇文章主要介紹了Vue中點(diǎn)擊url下載文件案例詳解，此文需要注意若是文件的url存在跨域的情況，則可能會(huì)下載失敗，因?yàn)閒etch請(qǐng)求連接后，由于跨域，拿不到資源，也就無法執(zhí)行后續(xù)的操作，此時(shí)是失敗的,詳細(xì)內(nèi)容跟隨小編一起看看吧
2022-04-04
Vue單頁面應(yīng)用保證F5強(qiáng)刷不清空數(shù)據(jù)的解決方案
最近小編遇到這樣的問題當(dāng)vue單頁面按F5強(qiáng)刷，數(shù)據(jù)就恢復(fù)初始了，這怎么辦呢？下面小編給大家?guī)砹薞ue單頁面應(yīng)用保證F5強(qiáng)刷不清空數(shù)據(jù)的解決方案，感興趣的朋友一起看看吧
2018-01-01
Vue中使用webpack別名的方法實(shí)例詳解
本文通過實(shí)例給大家介紹了Vue中使用webpack別名的方法,非常不錯(cuò)，具體一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-06-06
前端JS也可以連點(diǎn)成線詳解(Vue中運(yùn)用AntVG6)
這篇文章主要給大家介紹了關(guān)于前端JS連點(diǎn)成線(Vue中運(yùn)用?AntVG6)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2023-01-01
如何用vue封裝axios請(qǐng)求
對(duì)axios進(jìn)行封裝以及將API接口按業(yè)務(wù)模塊統(tǒng)一管理，有助于我們簡(jiǎn)化代碼，方便后期維護(hù)。本文介紹了如何用vue封裝axios請(qǐng)求，感興趣的同學(xué)，可以參考下。
2021-06-06
Vue中使用Swiper簡(jiǎn)單封裝組件示例
這篇文章主要為大家介紹了Vue中使用Swiper簡(jiǎn)單封裝組件示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-08-08