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

在 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 及参数传递方式

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