一、Content-Type简介
"Content-Type" 是HTTP请求头中的⼀个标头，⽤于指示请求或响应中包含的实体的媒体类型，可以出现在请求或响应标头中。它告诉服务器如何处理客户端传过来的数据（通知服务器客户端正在发送的数据类型）、客户端如何处理响应中的数据。get 请求的 headers 中是没有 content-type 这个字段的。content-type 是⽤来指定消息体的格式的，get 请求⼀般没有消息体，所以，get 请求⼀般不⽤设置 content-type。
Content-Type格式：type/subtype;parameter
-
type：主类型，任意的字符串，如text，如果是*号代表所有；
-
subtype：⼦类型，任意的字符串，如html，如果是*号代表所有，⽤“/”与主类型隔开；
-
parameter：可选参数，如charset，boundary等。
二、Content-Type类型
- text/plain：纯⽂本
- text/html：HTML格式
- application/json：JSON数据格式
- application/xml：XML数据格式
- application/x-www-form-urlencoded：普通表单格式（键值对）
- multipart/form-data：多部分表单格式（⽤于⽂件上传）
- image/jpeg：JPEG图⽚格式
- image/png：PNG图⽚格式
- audio/mpeg：MPEG⾳频格式
- video/mp4：MP4视频格式
- application/octet-stream：⼆进制流数据格式
三、常⽤类型
3.1. application/json：JSON数据格式
JSON 是一种轻量级的数据格式，以“键-值”对的方式组织的数据。这个使用这个类型，需要参数本身就是json格式的数据，参数会被直接放到请求实体里，不进行任何处理。服务端/客户端会按json格式解析数据（约定好的情况下）。是axios的post方法中默认的"Content-Type"。
3.2. application/x-www-form-urlencoded：普通表单格式（键值对）
HTTP会将请求参数用key1=val1&key2=val2的方式进行组织，并放到请求实体里面，注意如果是中文或特殊字符如"/"、","、“:" 等会自动进行URL转码。不支持文件，一般用于表单提交。
3.3. multipart/form-data：多部分表单格式（用于文件上传）
需要在表单中进行文件上传时，就需要使用该格式。
四、springBoot后端接收参数⽅式
-
前端传⼊Content-Type:application/json格式的数据：
- 后端必须使⽤@RequestBody注解将json字符串转化为对象。
// 前端传⼊Content-Type:application/json格式
@PostMapping("/loginByUser")
public User loginByUser(@RequestBody User user) {
return user;
}
2. 前端传⼊Content-Type:application/x-www-form-urlencoded格式的数据：
* 当后端以实体类接收，参数前不需要加任何注解。
* 当后端⽤参数接收，如果传⼊的参数名和后端声明的参数名⼀致，则⽆需注解；否则需要@RequestParam注解。
* 当后端使⽤Map来接收，需要@RequestParam注解。
* 当后端使⽤数组类型来接收，不需要@RequestParam注解（参数名需要⼀致）。
// 当后端以实体类接收，参数前不需要加任何注解
@PostMapping("/loginByUser")
public User loginByUser(User user) {
return user;
}
// 当后端⽤参数接收，如果传⼊的参数名和后端声明的参数名⼀致，则⽆需注解；否则需要@R
equestParam注解
@PostMapping("/loginByParam")
public User loginByParam(@RequestParam("name1") String name,@RequestParam(value = "age",required = true, defaultValue = "20") int age) {
return new User(name, age);
}
// 当后端使⽤Map来接收，需要@RequestParam注解。
@PostMapping("/loginByMap")
public User loginByMap(@RequestParam Map<String, Object> map) {
String name = (String) map.get("name");
int age = Integer.parseInt((String) map.get("age"));
return new User(name, age);
}
// 当后端使⽤数组类型来接收，不需要@RequestParam注解
@PostMapping("/array")
public Integer[] array(Integer[] a) {
return a;
}
3.更多
- 如果后端已经使用了@RequestBody注解，代表只接收application/json类型的数据，此时若再传入application/x-www-form-urlencoded类型的数据，则后台会报错。
- 由于get无请求体，那么@RequestBody不能使用在get请求上。
- @RequestBody与@RequestParam可以同时使用，@RequestBody最多只能有一个，而@RequestParam可以有多个。
五、axios的data与params
5.1. params
params是添加到url的请求字符串中的。
5.2. data
data是添加到请求体（body）中的。 使用data时，可以设置content-type。
axios({
method: "get",
url: "http://www.tuling123.com/openapi/api?key=20ff1803ff65429b809a310653c9daac",
data,
headers: {'Content-Type':'application/x-www-form-urlencoded'}
})
六. 设置content-type
- axios：headers: {'Content-Type':'application/x-www-form-urlencoded'}
- Form表单：enctype
<form action="/url.do" enctype="multipart/form-data" method="post">
<input type="file" name="name"/>
<input type="submit" value="提交">
</form>
3. 原生AJAX： 原生AJAX的content-type默认为text/plain;charset=UTF-8
const xhr = new XMLHttpRequest();
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
