問題場景

場景很簡單，就是一個正常 axios post 請求：

axios({
	headers: {
		'deviceCode': 'A95ZEF1-47B5-AC90BF3'
	},
	method: 'post',
	url: '/api/lockServer/search',
	data: {
		username,
		pwd
	}
})

后臺說沒有接收到你的傳參。

這就有點奇怪了，我看了一下瀏覽器的請求信息是 OK 的，參數(shù)都是有的，而且之前這樣用 axios 也沒有這個問題。

但是這個接口是通用的，別人都用了，是 OK 的，接口沒問題。

問題原因

要點1

原因就是這次的接口使用 java spring mvc
并且在這個方法上使用了注解 @RequestParam

那么這個是什么意思呢，這個是只能從請求的地址中取出參數(shù)，也就是只能從 username=admin&password=admin 這種字符串中解析出參數(shù)。

要點2

我們還可以看到我們這次請求的 Content-Type：

application/json;charset=UTF-8

關(guān)于這一點需要說明的是：

1、axios會幫我們 轉(zhuǎn)換請求數(shù)據(jù)和響應(yīng)數(shù)據(jù) 以及 自動轉(zhuǎn)換 JSON 數(shù)據(jù)

2、在 axios 源碼中發(fā)現(xiàn)下面這段內(nèi)容：（很關(guān)鍵）

我們知道在做 post 請求的時候，我們的傳參是 data: {...} 或者直接 {...} 的形式傳遞的，嗯，就是下面這兩種形式

【第一種形式】

【第二種形式】

非常的刺激，這兩種形式無一例外都觸發(fā)了 axios 源碼中【很關(guān)鍵】的那一段代碼

問題分析

也就是說，我們的 Content-Type 變成了 application/json;charset=utf-8
然后，因為我們的參數(shù)是 JSON 對象，axios 幫我們做了一個 stringify 的處理。
而且查閱 axios 文檔可以知道：axios 使用 post 發(fā)送數(shù)據(jù)時，默認是直接把 json 放到請求體中提交到后端的。

那么，這就與我們服務(wù)端要求的 'Content-Type': 'application/x-www-form-urlencoded' 以及 @RequestParam 不符合。

解決方案

解決方案一

【用 URLSearchParams 傳遞參數(shù)】

let param = new URLSearchParams()
param.append('username', 'admin')
param.append('pwd', 'admin')
axios({
	method: 'post',
	url: '/api/lockServer/search',
	data: param
})

需要注意的是： URLSearchParams 不支持所有的瀏覽器，但是總體的支持情況還是 OK 的，所以優(yōu)先推薦這種簡單直接的解決方案

解決方案二

網(wǎng)上有很多方案說使用
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
或者
{headers:{'Content-Type':'application/x-www-form-urlencoded'}}
我試了一下，其實這樣還是不行的
【還需要額外的操作，（我們要將參數(shù)轉(zhuǎn)換為query參數(shù)）】
引入 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 源碼中有那么一段【很關(guān)鍵】的代碼，那么，我們也可以通過修改 transformRequest 來達到我們的目的。

在 axios 的請求配置項中，是有 transformRequest 的配置的：

OK，那么現(xiàn)在我們的請求就可以寫成下面這個樣子了：

import Qs from 'qs'
axios({
	url: '/api/lockServer/search',
	method: 'post',
	transformRequest: [function (data) {
	    // 對 data 進行任意轉(zhuǎn)換處理
	    return Qs.stringify(data)
    }],
	headers: {
		'deviceCode': 'A95ZEF1-47B5-AC90BF3'
	},
	data: {
	    username: 'admin',
		pwd: 'admin'
	}
})

解決方案四

【重寫一個 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;
	}],
})

解決方案五

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

解決方案六

我們知道現(xiàn)在我們服務(wù)端同學(xué)接收參數(shù)用的是 @RequestParam（通過字符串中解析出參數(shù)）
其實還有另一種是 @RequestBody（從請求體中獲取參數(shù)）。

到此這篇關(guān)于axios 發(fā) post 請求，后端接收不到參數(shù)的解決方案的文章就介紹到這了,更多相關(guān)axios 發(fā) post 請求后端接收不到參數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論