重庆高端品牌网站建设,如何利用模板做网站视频,品牌网站建设的关键事项,自适应网站如何做移动适配在 HTTP 协议中#xff0c;Content-Type 是一个非常关键的请求头字段#xff0c;它用于指示发送给接收方的数据类型。正确设置 Content-Type 对于前后端数据交互至关重要。
本文将详细介绍常见的 Content-Type 类型#xff0c;并结合 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/jsonapplication/jsonJSON 格式数据现代 Web 开发中最常用的格式application/x-www-form-urlencodedapplication/x-www-form-urlencoded表单提交的标准格式键值对形式multipart/form-datamultipart/form-data上传文件时使用支持二进制文件和文本混合text/xml 或 application/xmltext/xml / application/xmlXML 格式数据application/octet-streamapplication/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 qsimport 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 MapString, String params) {return ResponseEntity.ok(Received: params.get(username));
}3. multipart/form-data
使用场景
文件上传包含文件和表单数据混合的情况
Vue 示例使用 FormData
templateinput typefile changeuploadFile
/templatescript
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}});}}
};
/scriptSpring 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 ResponseEntityResource 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结构化数据直接传对象RequestBodyapplication/x-www-form-urlencoded表单数据qs.stringify()RequestParam, Mapmultipart/form-data文件上传FormDataMultipartFileapplication/octet-stream二进制数据responseType: blob返回 Resource 五、注意事项
JSON 格式必须严格符合语法规范否则后端无法解析。上传文件时不能使用 JSON必须使用 multipart/form-data。使用 FormData 时不要手动设置 Content-Type 浏览器会自动处理边界boundary。如果使用了全局拦截器或封装了 axios 实例请确保 headers 设置生效。 六、扩展其他 Content-Type 类型
类型说明text/plain纯文本text/htmlHTML 文档application/pdfPDF 文件image/jpeg, image/png图片格式video/mp4, audio/mpeg音视频格式 七、结语
掌握 Content-Type 是前后端交互的基础尤其在 Vue Spring Boot 架构下合理选择和设置 Content-Type 可以显著提升接口的健壮性和易用性。希望本篇文章能帮助你更清晰地理解不同类型的使用场景和实现方式。
如果你觉得这篇文章对你有帮助欢迎点赞、收藏或转发 相关阅读推荐
Vue Spring Boot 前后端交互实践正确使用 Content-Type: application/json 及参数传递方式
如有疑问或建议欢迎留言交流
