网站导航
> 技术文档 > HTTP 请求中的 `Content-Type` 类型详解及前后端示例（Vue + Spring Boot）

HTTP 请求中的 `Content-Type` 类型详解及前后端示例（Vue + Spring Boot）

网友: 技术文档 2025-09-03 10:54:25

在 HTTP 协议中，Content-Type 是一个非常关键的请求头字段，它用于指示发送给接收方的数据类型。正确设置 Content-Type 对于前后端数据交互至关重要。

本文将详细介绍常见的 Content-Type 类型，并结合 Vue 前端 和 Spring Boot 后端 的实际开发场景，演示如何设置、传递参数以及后端如何接收这些参数。

一、什么是 Content-Type？

Content-Type 是 HTTP 请求或响应头中的一个字段，用来指定消息体（body）的媒体类型（MIME type）。它的格式如下：

Content-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 接收方式：
@RestControllerpublic 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）：
 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\' } }); } }};
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 及参数传递方式

如有疑问或建议，欢迎留言交流！

网络标签：

相关问题