axios 發 post 請求,後端接收不到參數的解決方案

來源:互聯網
上載者:User

標籤:bst   情況   comm   引入   sans   headers   user   src   分享圖片   

問題情境

情境很簡單,就是一個正常 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 請求,後端接收不到參數的解決方案

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.