最近做项目的时候，前端异步请求用到了尤大推荐的axios，发现一个问题，就是POST请求的时候，后台人员说他们的接口里面取不到我传过去的数据。
案例重现
axios.js
let axios = import('axios');
instance = axios.create({
baseURL: '/ghcws',
timeout: 10000,
});
export default instance;
userService.js
import axios = import('./axios');
export async function () {
axios.post('/api/doLogin', {
usesrname: 'admin',
password: 'admin'
})
}
后端的springMVC的关键代码(简化版)
@RequestMappting("/api/doLogin")
public Object doLogin(@RequestParam String username, @RequestParam String password) throws Exception {
System.out.println("username: "+username);
System.out.println("password: "+password);
JSONObject json = new JSONObject();
json.put("success", true);
return json;
}
这个时候前端发的请求后端就接收不到参数了。
我们可以打开chrome开发者工具，看看axios的请求的请求头详情，发现Request-Headers的Content-Type是application/json;charset=UTF-8，Request Payload为
{username: "admin", password: "admin"}
我们同样的用jquery的ajax把我们这个请求同样的发送一遍
发现Request-Headers的Content-Type是application/x-www-form-urlencoded;charset=UTF-8，URL encode为
username=admin&password=admin
到这里，由于是前端换了一个发送ajax请求的工具，导致以前的接口不能用了，后端朋友们首先想到的就是我们前端人员写错了，然后我们就要开始苦逼的研究了。
可以看出，两个请求唯一的不同就是Content-Type的问题，朋友们，是Request Headers中的Content-Type哈，不是Response中的哈，不要搞错了。
那不同点找到了，那我们就可以开始搞了，我们大胆的猜想，如果把axios的post请求的Content-Type也变成application/x-www-form-urlencoded，那么问题想必就迎刃而解了。
我们看看axios的源码
axios.create = function create(instanceConfig) {
return createInstance(utils.merge(defaults, instanceConfig));
};
create方法就是把我们传入的参数和默认参数合并，然后创建一个axios实例，我们再看看defaults这个配置对象
var utils = require('./utils');
var normalizeHeaderName = require('./helpers/normalizeHeaderName');
/* 这个表明默认的Content-Type就是我们想要的 */
var DEFAULT_CONTENT_TYPE = {
'Content-Type': 'application/x-www-form-urlencoded'
};
/* 看方法名就知道，这个是设置ContentType用的（Content-Type没有设置的时候） */
function setContentTypeIfUnset(headers, value) {
if (!utils.isUndefined(headers) && utils.isUndefined(headers['Content-Type'])) {
headers['Content-Type'] = value;
}
}
/* 这个是用来区别对待浏览器和nodejs请求发起工具的区别的 */
function getDefaultAdapter() {
var adapter;
if (typeof XMLHttpRequest !== 'undefined') {
// For browsers use XHR adapter
adapter = require('./adapters/xhr');
} else if (typeof process !== 'undefined') {
// For node use HTTP adapter
adapter = require('./adapters/http');
}
return adapter;
}
/* 这里终于看到了万众期待的默认配置 */
var defaults = {
adapter: getDefaultAdapter(),
/* 这个transformRequest配置就厉害了
* 官方描述`transformRequest` allows changes to the request data before it is sent to the server
* 这个函数是接受我们传递的参数，并且在发送到服务器前，可以对其进行更改
* */
transformRequest: [function transformRequest(data, headers) {
normalizeHeaderName(headers, 'Content-Type');
if (utils.isFormData(data) ||
utils.isArrayBuffer(data) ||
utils.isStream(data) ||
utils.isFile(data) ||
utils.isBlob(data)
) {
return data;
}
if (utils.isArrayBufferView(data)) {
return data.buffer;
}
/* 关键点1、如果用URLSearchParams对象传递参数，就可以用我们想要的Content-Type传递 */
if (utils.isURLSearchParams(data)) {
setContentTypeIfUnset(headers, 'application/x-www-form-urlencoded;charset=utf-8');
return data.toString();
}
/* 关键点2、这里我们看到，如果参数Object的话，就是通过json传递 */
if (utils.isObject(data)) {
setContentTypeIfUnset(headers, 'application/json;charset=utf-8');
return JSON.stringify(data);
}
return data;
}],
transformResponse: [function transformResponse(data) {
/*eslint no-param-reassign:0*/
if (typeof data === 'string') {
try {
data = JSON.parse(data);
} catch (e) { /* Ignore */ }
}
return data;
}],
timeout: 0,
xsrfCookieName: 'XSRF-TOKEN',
xsrfHeaderName: 'X-XSRF-TOKEN',
maxContentLength: -1,
validateStatus: function validateStatus(status) {
return status >= 200 && status < 300;
}
};
defaults.headers = {
common: {
'Accept': 'application/json, text/plain, */*'
}
};
utils.forEach(['delete', 'get', 'head'], function forEachMethodNoData(method) {
defaults.headers[method] = {};
});
utils.forEach(['post', 'put', 'patch'], function forEachMethodWithData(method) {
defaults.headers[method] = utils.merge(DEFAULT_CONTENT_TYPE);
});
module.exports = defaults;
通过上面的源码注解，我们找到了着手点：
- 用URLSearchParams传递参数
- 改写transformRequest
很显然，如果我们不是通过axios.create方法创建实例，再拿来调用，我们就只能采用第一种解决办法
第一种方法解决方案
改写userService
import axios = import('axios');
let param = new URLSearchParams();
param.append("username", "admin");
param.append("password", "admin");
export async function () {
axios.post('/api/doLogin', param)
}
果不其然，这就成功了。
如果不想用URLSearchParams，还是觉得Json方便，那么我们可以重新配置transformRequest
第二种方法解决方案
改写axios的create的配置
import axios from 'axios';
// 这里我自己重写了一下类型判断的所有方法，当然也可以用util库
import { isFormData,
isArrayBuffer,
isStream,
isFile,
isBlob,
isURLSearchParams,
isObject,
isUndefined } from './Type';
function setContentTypeIfUnset(headers, value) {
if (!isUndefined(headers) && isUndefined(headers['Content-Type'])) {
headers['Content-Type'] = value;
}
}
const instance = axios.create({
baseURL: '/ghcws',
timeout: 10000,
transformRequest: [function transformRequest(data, headers) {
/* 把类似content-type这种改成Content-Type */
let keys = Object.keys(headers);
let normalizedName = 'Content-Type';
keys.forEach(name => {
if (name !== normalizedName && name.toUpperCase() === normalizedName.toUpperCase()) {
headers[normalizedName] = headers[name];
delete headers[name];
}
});
if (isFormData(data) ||
isArrayBuffer(data) ||
isStream(data) ||
isFile(data) ||
isBlob(data)
) {
return data;
}
if (isURLSearchParams(data)) {
setContentTypeIfUnset(headers, 'application/x-www-form-urlencoded;charset=utf-8');
return data.toString();
}
/* 这里是重点，其他的其实可以照着axios的源码抄 */
/* 这里就是用来解决POST提交json数据的时候是直接把整个json放在request payload中提交过去的情况
* 这里简单处理下，把 {name: 'admin', pwd: 123}这种转换成name=admin&pwd=123就可以通过
* x-www-form-urlencoded这种方式提交
* */
if (isObject(data)) {
setContentTypeIfUnset(headers, 'application/x-www-form-urlencoded;charset=utf-8');
let keys2 = Object.keys(data);
/* 这里就是把json变成url形式，并进行encode */
return encodeURI(keys2.map(name => `${name}=${data[name]}`).join('&'));
}
return data;
}]
});
export default instance;
当然不用create方法也是可以通过修改axios.defaults.transformRequest实现相同效果。
那么现在问题虽然解决了，但是为什么之前后端就是接收不到json类型的参数呢????
其实原因很简单，因为axios post一个对象到后端的时候，是直接把json放到请求体中的，提交到后端的，而后端是怎么取参数的，是用的
@RequestParam
这个是什么意思，这个是只能从请求的地址中取出参数，也就是只能从username=admin&password=admin这种字符串中解析出参数，这样是不能提取出请求体中的参数的。
那么现在我们又可以大胆的猜想了，如果我们不这么去取参数，而是直接去请求体中取参数不就行了么。
我们可以不改前端，只需要改改后端代码就可以了。
解决方案
@RequestMappting("/api/doLogin")
@ResponseBody
public Object doLogin(@RequestBody Map map) throws Exception {
System.out.println("username: "+map.get("username"));
System.out.println("password: "+map.get("password"));
JSONObject json = new JSONObject();
json.put("success", true);
return json;
}
通过@RequestBody 注解，springmvc可以把json中的数据绑定到Map中， 我们就可以取出了.
或者也可以
@RequestBody Pojo pojo
这样也可以把json绑定到实体类中，也能取到参数。
总结
总共三种解决方案：
- 前端不用json传参，改用URLSearchParams
- 前端改写axios的transformRequest
- 后端使用@RequestBody注解绑定json到实体类
