我相信遇到這個(gè)問題的兄弟們，不帶參數(shù)的情況下都是沒有問題吧，

如果有問題，百度吧，好解決，答案都比較靠譜

這里主要針對(duì)帶參數(shù)的情況，坑多

另外，我默認(rèn)你用postman帶參測(cè)試接口是沒問題的

不多說，直接上實(shí)例供參考吧，1、2可以跳過

?

1、安裝axios

npm install axios --save

2、添加axios組件

import Axios from 'axios'

Axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

axios.defaults.baseURL = 'http://localhost:7878/zkview';

Vue.prototype.$ajax = axios

3、如何解決？這里采取的是URLSearchParams的方式，因?yàn)椴幌雽?dǎo)入qs模塊（qs其實(shí)也是類似這個(gè)方式，解決問題的核心就是把參數(shù)轉(zhuǎn)換成標(biāo)準(zhǔn)的鍵值對(duì)）

問題是解決了，下面是我了解到的原因，有興趣的可以繼續(xù)往下看

1、有的兄弟會(huì)遇到前端header就沒有看到axios準(zhǔn)備post到后臺(tái)接口的參數(shù)（我就是這種情況）

2、有的兄弟會(huì)遇到前端header能看到參數(shù)，但是后臺(tái)沒有接收到參數(shù)

那么，為什么會(huì)導(dǎo)致這兩種情況呢？

數(shù)據(jù)變成了類json進(jìn)行傳輸而且數(shù)據(jù)請(qǐng)求的方式也發(fā)生了變化，上面變成了Request Payload

這個(gè)時(shí)候數(shù)據(jù)不是標(biāo)準(zhǔn)的鍵值對(duì)，無法解析成類似get傳參方式 ?userid=zhonghangAlex&password=woaini123 這樣的字段

我們?nèi)绻褂眠@樣的后臺(tái)數(shù)據(jù)獲取方式（如下Python代碼），就會(huì)發(fā)生異常，其它后端語(yǔ)言同理。

//Python示例 我們?nèi)绻褂眠@樣的后臺(tái)數(shù)據(jù)獲取方式，就會(huì)發(fā)生異常req_userid = request.POST.get('userid') req_password = request.POST.get('password')

?

那么應(yīng)該如何處理呢？

?

前端解決

使用URLSearchParams傳遞參數(shù)是大多數(shù)網(wǎng)友的做法，如下核心代碼示例

import axios = import('axios') let param = new URLSearchParams() param.append("userid", "zhonghangAlex") param.append("password", "woaini123")axios.post('xxxxx', param).then(.....)

果然我們傳遞的參數(shù)就正常了，后臺(tái)可以獲取到相應(yīng)的鍵值對(duì)，但是使用這樣的方法有兩點(diǎn)壞處，第一個(gè)是前端請(qǐng)求每一個(gè)字段都append會(huì)很麻煩，第二個(gè)就是這個(gè)對(duì)象它不兼容IE和Edge甚至在360瀏覽器都會(huì)掛掉，我曾經(jīng)嘗試過IE11版本都不行，提示這個(gè)對(duì)象缺失。所以我們最好的辦法就是在后端做一個(gè)處理！

后端解決

????? 經(jīng)過查閱大量的資料，我發(fā)現(xiàn)，正如我前面說過的，get請(qǐng)求發(fā)送的是很標(biāo)準(zhǔn)的鍵值對(duì)，數(shù)據(jù)可以被后端解析，那為什么后端不能解析json格式的post數(shù)據(jù)呢？按照這個(gè)思路我研究了下request的api，發(fā)現(xiàn)這個(gè)json是封裝到body中的，所以，在后端的調(diào)用應(yīng)該使用body對(duì)象。

這就是后端處理的辦法，核心的代碼是：

//python 核心代碼示例 req = json.loads(request.body) req_userid = req['userid'] req_password = req['password']

這樣req_userid和req_password就分別存儲(chǔ)了前端發(fā)來的數(shù)據(jù)。

前端使用node的時(shí)候也是一樣的，post請(qǐng)求的數(shù)據(jù)會(huì)封裝到request的body中，所以不管你采用什么樣的語(yǔ)言寫后臺(tái)，這個(gè)問題總是可以在后臺(tái)解決的。

?

今日贈(zèng)語(yǔ)：

“靜”中藏著一個(gè)“爭(zhēng)”字，越爭(zhēng)心越要靜

“穩(wěn)”中藏著一個(gè)“急”字，越急心越要穩(wěn)

“忙”中藏著一個(gè)“亡”字，越忙越要照顧好自己

“忍”中藏著一個(gè)“刀”字，越忍越要看清事態(tài)

?

總結(jié)

以上是生活随笔為你收集整理的vue axios解决post传参数问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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