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

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

news 2025/6/18 12:07:53

在 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`