axios发送post数据后台收不到_使用axios post 提交数据，后台获取不到
https://www.cnblogs.com/yiyi17/p/9409249.html(copy
https://www.cnblogs.com/loveyaxin/p/8385694.html(copy
問題場景
場景很簡單，就是一個正常 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、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'");
解決方案六
我們知道現在我們服務端同學接收參數用的是?@RequestParam(通過字符串中解析出參數)
其實還有另一種是?@RequestBody(從請求體中獲取參數)。
我們讓后端的同學改成?@RequestBody?不就可以了嗎，(#^.^#) 【他說我才不改呢】
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的axios发送post数据后台收不到_使用axios post 提交数据，后台获取不到的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 有些窗口底部被任务栏挡住了_开始使用 T
- 下一篇： 输入参数_太实用！输入参数1秒算出功率，