郴州企业网站建设制作官方网站案例
在 HTTP 协议中，Content-Type 是一个非常关键的请求头字段，它用于指示发送给接收方的数据类型。正确设置 Content-Type 对于前后端数据交互至关重要。
本文将详细介绍常见的 Content-Type 类型，并结合 Vue 前端 和 Spring Boot 后端 的实际开发场景，演示如何设置、传递参数以及后端如何接收这些参数。
一、什么是 Content-Type？
Content-Type 是 HTTP 请求或响应头中的一个字段，用来指定消息体（body）的媒体类型（MIME type）。它的格式如下：
Content-Type: <media-type>
例如：
Content-Type: application/json
二、常见的 Content-Type 类型
| 类型 | MIME 类型 | 描述 |
|---|---|---|
application/json | application/json | JSON 格式数据，现代 Web 开发中最常用的格式 |
application/x-www-form-urlencoded | application/x-www-form-urlencoded | 表单提交的标准格式，键值对形式 |
multipart/form-data | multipart/form-data | 上传文件时使用，支持二进制文件和文本混合 |
text/xml 或 application/xml | text/xml / application/xml | XML 格式数据 |
application/octet-stream | application/octet-stream | 二进制流数据，常用于下载文件 |
三、不同 Content-Type 的使用场景与示例
1. application/json
使用场景：
- 发送结构化数据（如对象、数组）
- 前后端分离项目中常见
Vue 示例（使用 axios）：
import axios from 'axios';// 第一个请求
axios.post('/api/login', {username: 'admin',password: '123456'
}, {headers: {'Content-Type': 'application/json'}
});// 第二个请求
axios.post('/api/login2', id, {headers: {'Content-Type': 'application/json'}
});
Spring Boot 接收方式：
@RestController
public class UserController {@PostMapping("/login")public ResponseEntity<?> login(@RequestBody User user) {return ResponseEntity.ok("Received: " + user.getUsername());}@PostMapping("/login2")public ResponseEntity<?> login2(@RequestBody Long id) {return ResponseEntity.ok("Received: " + id);}static class User {private String username;private String password;// getters and setters}
}
2. application/x-www-form-urlencoded
使用场景：
- HTML 表单默认提交方式
- 不适合复杂嵌套结构
Vue 示例（使用 qs 库序列化）：
npm install qs
import axios from 'axios';
import qs from 'qs';const data = qs.stringify({username: 'admin',password: '123456'
});axios.post('/api/login', data, {headers: {'Content-Type': 'application/x-www-form-urlencoded'}
});
Spring Boot 接收方式：
@PostMapping("/login")
public ResponseEntity<?> login(@RequestParam String username, @RequestParam String password) {return ResponseEntity.ok("Received: " + username);
}
或者使用 Map 接收多个参数：
@PostMapping("/login")
public ResponseEntity<?> login(@RequestParam Map<String, String> params) {return ResponseEntity.ok("Received: " + params.get("username"));
}
3. multipart/form-data
使用场景：
- 文件上传
- 包含文件和表单数据混合的情况
Vue 示例（使用 FormData）：
<template><input type="file" @change="uploadFile">
</template><script>
import axios from 'axios';export default {methods: {uploadFile(event) {const file = event.target.files[0];const formData = new FormData();formData.append('file', file);axios.post('/api/upload', formData, {headers: {'Content-Type': 'multipart/form-data'}});}}
};
</script>
Spring Boot 接收方式：
@PostMapping("/upload")
public ResponseEntity<?> upload(@RequestParam("file") MultipartFile file) {return ResponseEntity.ok("Received file: " + file.getOriginalFilename());
}
如果同时传参和文件：
// Vue 端添加额外字段
formData.append('username', 'admin');
@PostMapping("/upload")
public ResponseEntity<?> upload(@RequestParam("file") MultipartFile file,@RequestParam("username") String username) {return ResponseEntity.ok("User: " + username + ", File: " + file.getOriginalFilename());
}
4. application/octet-stream
使用场景：
- 下载文件或传输原始二进制数据
Vue 示例（Blob 数据）：
axios.get('/api/download', {responseType: 'blob'
}).then(response => {const url = window.URL.createObjectURL(new Blob([response.data]));const link = document.createElement('a');link.href = url;link.setAttribute('download', 'file.txt');document.body.appendChild(link);link.click();
});
Spring Boot 返回方式：
@GetMapping("/download")
public ResponseEntity<Resource> downloadFile() throws IOException {Path path = Paths.get("path/to/file.txt");Resource resource = new UrlResource(path.toUri());return ResponseEntity.ok().header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + resource.getFilename() + "\"").body(resource);
}
四、总结对比表
| Content-Type | 用途 | Vue 传参方式 | Spring Boot 接收方式 |
|---|---|---|---|
application/json | 结构化数据 | 直接传对象 | @RequestBody |
application/x-www-form-urlencoded | 表单数据 | qs.stringify() | @RequestParam, Map |
multipart/form-data | 文件上传 | FormData | MultipartFile |
application/octet-stream | 二进制数据 | responseType: 'blob' | 返回 Resource |
五、注意事项
- JSON 格式必须严格符合语法规范，否则后端无法解析。
- 上传文件时不能使用 JSON，必须使用
multipart/form-data。 - 使用
FormData时不要手动设置Content-Type，浏览器会自动处理边界（boundary）。 - 如果使用了全局拦截器或封装了 axios 实例，请确保 headers 设置生效。
六、扩展：其他 Content-Type 类型
| 类型 | 说明 |
|---|---|
text/plain | 纯文本 |
text/html | HTML 文档 |
application/pdf | PDF 文件 |
image/jpeg, image/png | 图片格式 |
video/mp4, audio/mpeg | 音视频格式 |
七、结语
掌握 Content-Type 是前后端交互的基础，尤其在 Vue + Spring Boot 架构下，合理选择和设置 Content-Type 可以显著提升接口的健壮性和易用性。希望本篇文章能帮助你更清晰地理解不同类型的使用场景和实现方式。
如果你觉得这篇文章对你有帮助，欢迎点赞、收藏或转发！
📌 相关阅读推荐：
- Vue + Spring Boot 前后端交互实践：正确使用
Content-Type: application/json及参数传递方式
如有疑问或建议，欢迎留言交流！