当前位置：首页 > news >正文

前端请求传参与后端匹配的接收方式Content-Type类型

news 来源：原创 2025/5/3 4:03:23

文章目录

- 一、Content-Type简介
- 二、Content-Type类型
- 三、常⽤类型
- - 3.1. application/json：JSON数据格式
  - 3.2. application/x-www-form-urlencoded：普通表单格式（键值对）
  - 3.3. multipart/form-data：多部分表单格式（用于文件上传）
- 四、请求头中的content-type说明
- 五、Axios请求与content-type设置
- - 常用的 content-type 类型有哪些？
  - 需要注意的是：
  - 针对 axios 库：
  - Postman 工具中的格式选择
- 六、springBoot后端接收参数⽅式
- @RequestBody、@RequestParam、@Pathvariable的使用情况，对于post和get请求，是不是都能用？
- 七、axios的data与params
- 八、设置content-type
- 九、 GET 不需要定义 Content-Type的原因总结如下：
- 十、补充

在看某个后端代码的时候，发现有的请求请求头中有Content-Type类型，有的没有这个类型，比如上面的这个请求，他的请求头信息如下：
在这里插入图片描述

在这里插入图片描述

一、Content-Type简介

“Content-Type”
是HTTP请求头中的⼀个标头，⽤于指示请求或响应中包含的实体的媒体类型，可以出现在请求或响应标头中。它告诉服务器如何处理客户端传过来的数据（通知服务器客户端正在发送的数据类型）、客户端如何处理响应中的数据。get
请求的 headers 中是没有 content-type 这个字段的。content-type 是⽤来指定消息体的格式的，get
请求⼀般没有消息体，所以，get 请求⼀般不⽤设置 content-type。

二、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：多部分表单格式（用于文件上传）

需要在表单中进行文件上传时，就需要使用该格式。

四、请求头中的content-type说明

在这里插入图片描述

五、Axios请求与content-type设置

对于前端请求，什么时候需要设置 content-type ？
get请求不存在设置content-type。只有post和put用到content-type，常用的post方式，所以这里着重说post。

常用的 content-type 类型有哪些？

post的content-type三种类型：

Content-Type: application/json
对于axios，post的时候axios.post(url,{a:1,b:2})，第二个参数是对象的时候，默认是这个类型。
Content-Type: application/x-www-form-urlencoded
对于axios，post的时候let data = {a:1,b:2}; axios.post(url,qs.stringify({ data }))，第二个参数是字符串的时候，默认是这个类型
Content-Type: multipart/form-data
对于axios，post的时候let data = new FormData(); data.append(‘a’,1’); data.append(‘b’,2); axios.post(url,data)，参数是formData类型的时候，默认是这个类型，如果用form自带的action提交，默认是这个类型

以上三种方式，服务器会以不同的方式解析，这点尤其注意！！！

需要注意的是：

axios中post请求 content-type默认值和原生的AJAX中post请求 content-type默认值不一样，和其他请求库（例如：isomorphic-fetch）的默认值也不一样。这些需要具体区分一下。

针对 axios 库：

content-type会根据参数的类型会自动有对应的值，一般无需设置。
但是，有些情况是，我想传对象，但实际服务器需要的的是application/x-www-form-urlencoded，此时需要只需要统一设置请求前将参数变成字符串即可transformRequest: [ function (data) { return Qs.stringify(data) } ]。

Postman 工具中的格式选择

以使用 axios 库为例：

当 Content-Type: application/json 时，选择 body / raw / json
当 Content-Type: application/x-www-form-urlencoded 时，选择 body / x-www-form-urlencoded
当 Content-Type: multipart/form-data 时，选择 body / form-data

六、springBoot后端接收参数⽅式

1、前端传⼊Content-Type:application/json格式的数据：

后端必须使⽤@RequestBody注解将json字符串转化为对象。

// 前端传⼊Content-Type:application/json格式
@PostMapping("/loginByUser")
public User loginByUser(@RequestBody User user) {return user;
}

前端传⼊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;
}

@RequestBody、@RequestParam、@Pathvariable的使用情况，对于post和get请求，是不是都能用？

在这里插入图片描述

如果后端已经使用了@RequestBody注解，代表只接收application/json类型的数据，此时若再传入application/x-www-form-urlencoded类型的数据，则后台会报错。
由于get无请求体，那么@RequestBody不能使用在get请求上。
@RequestBody与@RequestParam可以同时使用，@RequestBody最多只能有一个，而@RequestParam可以有多个。

七、axios的data与params

params
params是添加到url的请求字符串中的。
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

1、axios：headers: {‘Content-Type’:‘application/x-www-form-urlencoded’}
2、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’);

九、 GET 不需要定义 Content-Type的原因总结如下：

数据位置：GET 请求的数据是通过 URL 传递的，而不是通过请求体。因此，不需要指定 Content-Type，因为 HTTP 协议默认知道 GET 请求的数据是作为 URL 参数传递的。
请求体的缺失：在标准的 HTTP/1.1 规范中，GET 请求通常不包含请求体。由于没有请求体，也就没有需要指定 Content-Type 的必要。
简单性：GET 请求设计为简单且安全的数据检索，不需要复杂的数据类型定义，因此不需要 Content-Type。