# 问题一:axios发送post请求,后端使用HttpServletRequest接受不到参数
# 问题场景:
前端发送post
请求:
axios({
url: this.serverUrl + "/login/checkUser",
data: {
'name':'张思瑞',
'password': '333',
'validate': 'haha'
},
method: "post"
}).then((response) => {
console.log(response);
});
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
后端使用springMVC
接收:
@RequestMapping("/login/checkUser")
@ResponseBody
public Map<String,Object> checkUser(HttpServletRequest request){
String userName = request.getParameter("name");
String password = request.getParameter("password");
String validate = request.getParameter("validate");
...
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
接口可以调通,但是request
中找不到传送过来的数据。查看请求头发现Content-Type
是application/json;charset=UTF-8
,请求数据的格式如下:
# 问题分析:
发送Post
请求,参数都是在请求正文中传递到服务端。
但axios
会自动转换请求头和响应头数据。经过查阅网上资料发现,不管是下面哪种方式:
//方式一
axios({
url: this.serverUrl + "/login/checkUser",
data: {
'name':'张思瑞',
'password': '333',
'validate': 'haha'
},
method: "post"
})
//方式二
axios.post(this.serverUrl + "/login/checkUser",{
'name':'张思瑞',
'password': '333',
'validate': 'haha'
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
发送post
请求都会进入axios
中的transformRequest
中的isObject(data)
代码块中:
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/json;charset=utf-8');
return JSON.stringify(data);
}
return data;
}],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
也就是说,使用上述的方式发送post
请求,Content-Type
都会变成application/json;charset=utf-8
。但在全局的axios
默认值中,
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
1
# 问题二:axios
访问服务器Session
丢失问题
# 问题场景:
之前在做一个vue
项目的时候,需要用到验证码,所以将生成的验证码保存在后端的session
中,当用户提交表单时,再从session
中取出来进行校验。但出现了访问不到session
数据的问题。
# 问题分析:
开发环境中前后端分离端口号不同导致跨域问题,因为跨域请求时,每次ajax
请求都是新的session
,导致无法获取验证码信息。
# 解决方法:
每次axios
发起跨域类型请求时必须要带上cookie
到后端