axios互動post方式 後臺取值為空
文章目錄
- 問題場景
- 問題原因
- 要點1
- 要點2
- 問題分析
- 解決方案
- 解決方案一
- 解決方案二
- 解決方案三
- 解決方案四
- 解決方案五
- 解決方案六
- 問題場景
場景很簡單,就是一個正常 axios post 請求:
axios({
headers: {
'deviceCode': 'A95ZEF1-47B5-AC90BF3'
},
method: 'post',
url: '/api/lockServer/search',
data: {
username,
pwd
}
})
後臺說沒有接收到你的傳參。
這就有點奇怪了,我看了一下瀏覽器的請求資訊是 OK 的,引數都是有的,而且之前這樣用 axios 也沒有這個問題。
但是這個介面是通用的,別人都用了,是 OK 的,介面沒問題。
問題原因 要點1 原因就是這次的介面使用 java spring mvc 並且在這個方法上使用了註解 @RequestParam
那麼這個是什麼意思呢,這個是隻能從請求的地址中取出引數,也就是隻能從 username=admin&password=admin 這種字串中解析出引數。
要點2 我們還可以看到我們這次請求的 Content-Type:
application/json;charset=UTF-8 1 關於這一點需要說明的是:
1、axios會幫我們 轉換請求資料和響應資料 以及 自動轉換 JSON 資料
2、在 axios 原始碼中發現下面這段內容:(很關鍵)
我們知道在做 post 請求的時候,我們的傳參是 data: {...} 或者直接 {...} 的形式傳遞的,嗯,就是下面這兩種形式
【第一種形式】
【第二種形式】
非常的刺激,這兩種形式無一例外都觸發了 axios 原始碼中【很關鍵】的那一段程式碼
問題分析 也就是說,我們的 Content-Type 變成了 application/json;charset=utf-8 然後,因為我們的引數是 JSON 物件,axios 幫我們做了一個 stringify 的處理。 而且查閱 axios 文件可以知道:axios 使用 post 傳送資料時,預設是直接把 json 放到請求體中提交到後端的。
那麼,這就與我們服務端要求的 'Content-Type': 'application/x-www-form-urlencoded' 以及 @RequestParam 不符合。
解決方案 解決方案一 【用 URLSearchParams 傳遞引數】
let param = new URLSearchParams()
param.append('username', 'admin')
param.append('pwd', 'admin')
axios({
method: 'post',
url: '/api/lockServer/search',
data: param
})
需要注意的是: URLSearchParams 不支援所有的瀏覽器,但是總體的支援情況還是 OK 的,所以優先推薦這種簡單直接的解決方案
解決方案二 網上有很多方案說使用 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; 或者 {headers:{'Content-Type':'application/x-www-form-urlencoded'}} 我試了一下,其實這樣還是不行的 【還需要額外的操作,(我們要將引數轉換為query引數)】 引入 qs ,這個庫是 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 原始碼中有那麼一段【很關鍵】的程式碼,那麼,我們也可以通過修改 transformRequest 來達到我們的目的。
在 axios 的請求配置項中,是有 transformRequest 的配置的:
OK,那麼現在我們的請求就可以寫成下面這個樣子了:
import Qs from 'qs'
axios({
url: '/api/lockServer/search',
method: 'post',
transformRequest: [function (data) {
// 對 data 進行任意轉換處理
return Qs.stringify(data)
}],
headers: {
'deviceCode': 'A95ZEF1-47B5-AC90BF3'
},
data: {
username: 'admin',
pwd: 'admin'
}
})
解決方案四 【重寫一個 axios 例項,重新實現屬於我們自己的 transformRequest】
import axios from 'axios'
let instance = axios.create({
transformRequest: [function transformRequest(data, headers) {
normalizeHeaderName(headers, 'Content-Type');
if (utils.isFormData(data) ||
utils.isArrayBuffer(data) ||
utils.isBuffer(data) ||
utils.isStream(data) ||
utils.isFile(data) ||
utils.isBlob(data)
) {
return data;
}
if (utils.isArrayBufferView(data)) {
return data.buffer;
}
if (utils.isURLSearchParams(data)) {
setContentTypeIfUnset(headers, 'application/x-www-form-urlencoded;charset=utf-8');
return data.toString();
}
/*改了這裡*/
if (utils.isObject(data)) {
setContentTypeIfUnset(headers, 'application/x-www-form-urlencoded;charset=utf-8');
let _data = Object.keys(data)
return encodeURI(_data.map(name => `${name}=${data[name]}`).join('&'));
}
return data;
}],
})
解決方案五
axios.post('/api/lockServer/search',"userName='admin'&pwd='admin'");
1
解決方案六 我們知道現在我們服務端同學接收引數用的是 @RequestParam(通過字串中解析出引數) 其實還有另一種是 @RequestBody(從請求體中獲取引數)。
我們讓後端的同學改成 @RequestBody 不就可以了嗎,(#.#) 【他說我才不改呢】