axios 使用 post 發(fā)送數(shù)據(jù)時(shí),默認(rèn)是直接把 json 放到請(qǐng)求體中提交到后端的勒极。也就是說(shuō),我們的 Content-Type 變成了 application/json;charset=utf-8 , 這是 axios 默認(rèn)的請(qǐng)求頭 content-type 類型哥桥。但是實(shí)際我們后端要求的 'Content-Type': 'application/x-www-form-urlencoded' 為多見岁钓,這就與我們不符合。所以會(huì)在這里犯錯(cuò)誤偎巢,導(dǎo)致請(qǐng)求數(shù)據(jù)獲取不到蔼夜。明明自己的請(qǐng)求地址和參數(shù)都對(duì)了卻得不到數(shù)據(jù)。
jquery的'Content-Type'默認(rèn)采用的是application/x-www-form-urlencoded
post 請(qǐng)求常見的數(shù)據(jù)格式(content-type)
Content-Type: application/json : 請(qǐng)求體中的數(shù)據(jù)會(huì)以 json 字符串的形式發(fā)送到后端
Content-Type: application/x-www-form-urlencoded:請(qǐng)求體中的數(shù)據(jù)會(huì)以普通表單形式(鍵值對(duì))發(fā)送到后端
Content-Type: multipart/form-data: 它會(huì)將請(qǐng)求體的數(shù)據(jù)處理為一條消息压昼,以標(biāo)簽為單元求冷,用分隔符分開。既可以上傳鍵值對(duì)窍霞,也可以上傳文件匠题。
?后端需要接受的數(shù)據(jù)類型為:application/x-www-form-urlencoded,我們前端該如何配置:
常見方法匯總:
1官撼、【用 URLSearchParams 傳遞參數(shù)】代碼簡(jiǎn)單梧躺,省事
需要注意的是: URLSearchParams 不支持所有的瀏覽器,但是總體的支持情況還是 OK 的,所以優(yōu)先推薦這種簡(jiǎn)單直接的解決方案
let param =newURLSearchParams()
param.append('username','admin')
param.append('pwd','admin')
axios({? ? method:'post',? ? url:'/api/lockServer/search',? ? data: param})
2掠哥、’axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
3巩踏、import Qs from 'qs'let data = {
? ? "username": "cc",
? ? "psd": "123456"}
axios({
? ? headers: {
? ? ? ? 'Content-Type': 'application/x-www-form-urlencoded'? ? },
? ? method: 'post',
? ? url: '/api/lockServer/search',
? ? data: Qs.stringify(data)
})