要做的需求很簡單，就是一個axios的簡單請求，如下：

axios({

method: 'post',

url: '/api/login',

data: {

username,

pwd

}})

但是問題來了，后端說取不到我的username和pwd，問題又來了，我確實傳過去了，黑人問號臉？？？，然后我找了一下資料，終于把值成功傳過去，后端也成功取到了。

原因：后端用的框架是?spring mvc ，并且在這個方法上使用了注解?@RequestParam，這個就只能從請求的地址中取出參數(shù)，也就是只能從?username=admin&pwd=11111?這種字符串中解析出參數(shù)，也就是編碼格式(content-type)為：application/x-www-form-urlencode。(表單form的enctype屬性的編碼方式有兩種：application/x-www-form-urlencode和multipart/form-data)，但是axios會把請求的數(shù)據(jù)轉(zhuǎn)換成json格式，即為：application/json;charset=UTF-8，所以格式不同，就取不值了。

解決方案我嘗試了有6種，大家可以根據(jù)自己的需求選擇：

1.用 URLSearchParams

let param = new URLSearchParams()param.append('username', 'admin')param.append('pwd', 'admin')

axios({

method: 'post',

url: '/api/login',

data: param

})

缺點：兼容性不太好。

2.設(shè)置Content-Type

(1)axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

或者：{headers:{'Content-Type':'application/x-www-form-urlencoded'}}

(2)引入 qs (這個庫是 axios 里面包含的，直接引入，無需下載)。

import Qs from 'qs'let data = {

"username": "admin",

"pwd": "admin"

}axios({

headers: {

'deviceCode': 'A95ZEF1-47B5-AC90BF3'

},

method: 'post',

url: '/api/login',

data: Qs.stringify(data)

})

3.設(shè)置transformRequest

因為我們的請求編碼格式是被axios更改的，那我們也可以進(jìn)去設(shè)置，如下：

import Qs from 'qs'axios({

url: '/api/login',

method: 'post',

transformRequest: [function(data){

// 對 data 進(jìn)行任意轉(zhuǎn)換處理

return Qs.stringify(data)

}],

headers: {

'deviceCode': 'A95ZEF1-47B5-AC90BF3'? ? },

data: {

username: 'admin',

pwd: 'admin'? ? }

})

4.重寫一個 axios 實例，重新實現(xiàn)屬于我們自己的 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;

}],

})

5.axios.post('/api/lockServer/search',"userName='admin'&pwd='admin'");

6.我們知道服務(wù)端用的是?@RequestParam(通過字符串解析出參數(shù)) ，其實還有另一種是?@RequestBody(從請求體中獲取參數(shù))，讓后端改成?@RequestBody也可以。

總結(jié)

以上是生活随笔為你收集整理的axios不发起请求_axios 发 post 请求的问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。