以前都是用jquery寫頁面彩扔，最近接觸vue做項(xiàng)目妆档，剛開始和java聯(lián)調(diào)接口，結(jié)果http請(qǐng)求狀態(tài)200虫碉，但是服務(wù)端有請(qǐng)求贾惦，接收參數(shù)為空。
但是get請(qǐng)求參數(shù)是可以接收到的敦捧。
問題原因
原因就是這次的接口使用 java spring mvc?
并且在這個(gè)方法上使用了注解?@RequestParam
那么這個(gè)是什么意思呢须板，這個(gè)是只能從請(qǐng)求的地址中取出參數(shù)，也就是只能從?username=admin&password=admin這種字符串中解析出參數(shù)绞惦。
我們還可以看到我們這次請(qǐng)求的 Content-Type：
application/json;charset=UTF-8
關(guān)于這一點(diǎn)需要說明的是：
1逼纸、axios會(huì)幫我們?轉(zhuǎn)換請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù)?以及?自動(dòng)轉(zhuǎn)換 JSON 數(shù)據(jù)?
2、在 axios 源碼中發(fā)現(xiàn)下面這段內(nèi)容：（很關(guān)鍵）?
我們知道在做 post 請(qǐng)求的時(shí)候济蝉，我們的傳參是?data: {...}?或者直接?{...}?的形式傳遞的杰刽，嗯，就是下面這兩種形式
【第一種形式】?
【第二種形式】?
這兩種形式無一例外都觸發(fā)了 axios 源碼中【很關(guān)鍵】的那一段代碼
問題分析
也就是說王滤，我們的?Content-Type?變成了?application/json;charset=utf-8?
然后贺嫂，因?yàn)槲覀兊膮?shù)是 JSON 對(duì)象，axios 幫我們做了一個(gè) stringify 的處理雁乡。?
而且查閱 axios 文檔可以知道：axios 使用 post 發(fā)送數(shù)據(jù)時(shí)第喳，默認(rèn)是直接把 json 放到請(qǐng)求體中提交到后端的。
那么踱稍，這就與我們服務(wù)端要求的?'Content-Type': 'application/x-www-form-urlencoded'?以及?@RequestParam?不符合曲饱。
網(wǎng)上有很多方案說使用?
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';?
或者?
{headers:{'Content-Type':'application/x-www-form-urlencoded'}}?
我試了一下悠抹，其實(shí)這樣還是不行的?
【還需要額外的操作，（我們要將參數(shù)轉(zhuǎn)換為query參數(shù)）】?
引入 qs 扩淀，這個(gè)庫是 axios 里面包含的楔敌，不需要再下載了。
import Qs from 'qs'let data = {
? ? "username": "admin",
? ? "pwd": "admin"
}axios({
? ? headers: {
? ? ? ? 'deviceCode': 'A95ZEF1-47B5-AC90BF3'
? ? },
? ? method: 'post',
? ? url: '/api/lockServer/search',
? ? data: Qs.stringify(data)
})
第二種解決方案：
既然 axios 源碼中有那么一段【很關(guān)鍵】的代碼驻谆，那么卵凑，我們也可以通過修改?transformRequest?來達(dá)到我們的目的。
在 axios 的請(qǐng)求配置項(xiàng)中胜臊，是有?transformRequest?的配置的：?
那么現(xiàn)在我們的請(qǐng)求就可以寫成下面這個(gè)樣子了：
import Qs from 'qs'axios({
? ? url: '/api/lockServer/search',
? ? method: 'post',
? ? transformRequest: [function(data){? ? ? ? // 對(duì) data 進(jìn)行任意轉(zhuǎn)換處理? ? ? ? return Qs.stringify(data)
? ? }],
? ? headers: {
? ? ? ? 'deviceCode': 'A95ZEF1-47B5-AC90BF3'? ? },
? ? data: {
? ? ? ? username: 'admin',
? ? ? ? pwd: 'admin'? ? }
})
另一種解決方案
axios.post('/api/lockServer/search',"userName='admin'&pwd='admin'");
參數(shù)直接為url拼接
最后一種解決方案
我們知道現(xiàn)在我們服務(wù)端同學(xué)接收參數(shù)用的是?@RequestParam（通過字符串中解析出參數(shù)）?
其實(shí)還有另一種是?@RequestBody（從請(qǐng)求體中獲取參數(shù)）勺卢。
后端的同學(xué)改成?@RequestBody?不就可以了。
