126 lines
3.3 KiB
Markdown
126 lines
3.3 KiB
Markdown
|
---
|
|||
|
|
title: 使用axios问题小结
|
|||
|
|
date: 2021-02-22
|
|||
|
|
author: ac
|
|||
|
|
tags:
|
|||
|
|
- axios
|
|||
|
|
categories:
|
|||
|
|
- Web
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
### 问题一：axios发送post请求，后端使用HttpServletRequest接受不到参数
|
|||
|
|
|
|||
|
|
#### 问题场景：
|
|||
|
|
|
|||
|
|
前端发送`post` 请求：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
axios({
|
|||
|
|
url: this.serverUrl + "/login/checkUser",
|
|||
|
|
data: {
|
|||
|
|
'name':'张思瑞',
|
|||
|
|
'password': '333',
|
|||
|
|
'validate': 'haha'
|
|||
|
|
},
|
|||
|
|
method: "post"
|
|||
|
|
}).then((response) => {
|
|||
|
|
console.log(response);
|
|||
|
|
});
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
后端使用`springMVC`接收：
|
|||
|
|
|
|||
|
|
```java
|
|||
|
|
@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");
|
|||
|
|
...
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
接口可以调通，但是`request`中找不到传送过来的数据。查看请求头发现`Content-Type`是` application/json;charset=UTF-8 `，请求数据的格式如下：
|
|||
|
|
|
|||
|
|
<img src="../images/asioxdefaultcontenttype.png" alt="1613976940640" style="zoom: 80%;" />
|
|||
|
|
|
|||
|
|
#### 问题分析：
|
|||
|
|
|
|||
|
|
发送`Post`请求，参数都是在请求正文中传递到服务端。
|
|||
|
|
|
|||
|
|
但`axios`会自动转换请求头和响应头数据。经过查阅网上资料发现，不管是下面哪种方式：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
//方式一
|
|||
|
|
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'
|
|||
|
|
})
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
发送`post`请求都会进入`axios`中的`transformRequest`中的`isObject(data)`代码块中：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
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;
|
|||
|
|
}],
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
也就是说，使用上述的方式发送`post`请求，`Content-Type`都会变成`application/json;charset=utf-8`。但在全局的`axios`默认值中，
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
### 问题二：`axios`访问服务器`Session`丢失问题
|
|||
|
|
|
|||
|
|
#### 问题场景：
|
|||
|
|
|
|||
|
|
之前在做一个`vue`项目的时候，需要用到验证码，所以将生成的验证码保存在后端的`session`中，当用户提交表单时，再从`session`中取出来进行校验。但出现了访问不到`session`数据的问题。
|
|||
|
|
|
|||
|
|
#### 问题分析：
|
|||
|
|
|
|||
|
|
开发环境中前后端分离端口号不同导致跨域问题，因为跨域请求时，每次`ajax`请求都是新的`session`，导致无法获取验证码信息。
|
|||
|
|
|
|||
|
|
#### 解决方法：
|
|||
|
|
|
|||
|
|
每次`axios`发起跨域类型请求时必须要带上`cookie`到后端
|