一、錯誤回現(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ù)時，默認(rèn)是直接把 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);
?? ??? ?});
?? ?});
}文章來源：http://www.zghlxwxcb.cn/news/detail-781460.html
分享就到這里了~~~~文章來源地址http://www.zghlxwxcb.cn/news/detail-781460.html
到了這里，關(guān)于vue2前端使用axios發(fā)起post請求，后端(springboot)拿不到值解決辦法的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
