【WEB开发.js】HTTP请求和相应报文的头字段：Content-Type （巨巨巨巨详细好懂的举例详解）

Content-Type 是 HTTP 请求和响应报文中的头字段之一，用于指定发送的数据类型（MIME 类型）。它告诉服务器或客户端数据的格式，方便接收方正确解析和处理内容。

例如，在发送 JSON 数据时，会指定 Content-Type: application/json；而发送 HTML 页面时，则会指定 Content-Type: text/html。

常见的 Content-Type 类型

1. 文本类
  • text/plain：纯文本。
  • text/html：HTML 文档。
  • text/css：CSS 样式表。
  • text/javascript：JavaScript 文件。
2. 应用类
  • application/json：JSON 格式数据，适合传输复杂结构。
  • application/x-www-form-urlencoded：键值对格式，常用于表单数据提交。
  • application/xml：XML 格式数据。
  • application/octet-stream：二进制数据流（任意文件类型，通常用于下载）。
3. 多媒体类
  • image/png：PNG 图片。
  • image/jpeg：JPEG 图片。
  • audio/mpeg：MP3 音频。
  • video/mp4：MP4 视频。
4. 特殊用途
  • multipart/form-data：
    • 用于上传文件或表单数据。
    • 边界（boundary）标识数据段的分隔。
  • application/pdf：PDF 文件。

举例详解~~

1. application/json

用途
  • 用于发送或接收 JSON 格式数据。
  • 适合传输复杂数据（如嵌套对象、数组）。
前端（fetch）
fetch('/api/data', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({ name: 'Alice', age: 30 })
}).then(response => response.json()).then(data => console.log(data));
后端（Python Flask）
from flask import Flask, request, jsonifyapp = Flask(__name__)@app.route('/api/data', methods=['POST'])
def receive_json():data = request.get_json()  # 解析 JSON 数据print(data)  # {'name': 'Alice', 'age': 30}return jsonify({"status": "success", "received": data})if __name__ == '__main__':app.run()

2. application/x-www-form-urlencoded

用途
  • 常用于表单数据提交。
  • 数据编码成 key=value&key=value 的形式，适合简单键值对。
前端（fetch）
const formData = new URLSearchParams();
formData.append('name', 'Alice');
formData.append('age', '30');fetch('/api/form', {method: 'POST',headers: {'Content-Type': 'application/x-www-form-urlencoded'},body: formData.toString()
}).then(response => response.text()).then(data => console.log(data));
后端（Python Flask）
@app.route('/api/form', methods=['POST'])
def receive_form():data = request.form  # 获取表单数据print(data)  # ImmutableMultiDict([('name', 'Alice'), ('age', '30')])return f"Received: {data.to_dict()}"

3. multipart/form-data

用途
  • 用于上传文件和表单数据。
  • 数据分段发送，每段都有自己的边界（boundary）。
前端（fetch）
const formData = new FormData();
formData.append('name', 'Alice');
formData.append('file', new File(['Hello'], 'hello.txt'));fetch('/api/upload', {method: 'POST',body: formData // 不需要手动设置 Content-Type，浏览器会自动添加
}).then(response => response.text()).then(data => console.log(data));
后端（Python Flask）
@app.route('/api/upload', methods=['POST'])
def upload_file():name = request.form.get('name')  # 获取普通字段file = request.files.get('file')  # 获取文件对象print(f"Name: {name}, Filename: {file.filename}")return f"File {file.filename} received."

4. text/plain

用途
  • 用于发送纯文本数据。
  • 数据直接是字符串，无需额外格式化。
前端（fetch）
fetch('/api/plain', {method: 'POST',headers: {'Content-Type': 'text/plain'},body: 'Hello, this is plain text!'
}).then(response => response.text()).then(data => console.log(data));
后端（Python Flask）
@app.route('/api/plain', methods=['POST'])
def plain_text():data = request.data.decode('utf-8')  # 获取原始数据并解码print(data)  # Hello, this is plain text!return f"Received plain text: {data}"

5. text/html

用途
  • 用于返回 HTML 页面。
  • 适合前端动态展示 HTML 内容。
前端（请求示例）
fetch('/api/html', {method: 'GET'
}).then(response => response.text()).then(html => document.body.innerHTML = html);
后端（Python Flask）
@app.route('/api/html', methods=['GET'])
def return_html():html_content = """<html><body><h1>Welcome to my site</h1></body></html>"""return html_content, 200, {'Content-Type': 'text/html'}

6. application/octet-stream

用途
  • 用于传输任意二进制数据（如文件下载）。
  • 适合需要客户端保存的数据。
前端（下载文件）
fetch('/api/download').then(response => response.blob()).then(blob => {const url = window.URL.createObjectURL(blob);const a = document.createElement('a');a.href = url;a.download = 'example.bin'; // 保存的文件名a.click();});
后端（Python Flask）
@app.route('/api/download', methods=['GET'])
def download_file():with open('example.bin', 'rb') as f:file_data = f.read()return file_data, 200, {'Content-Type': 'application/octet-stream'}

7. image/png（或其他图片类型）

用途
  • 用于传输图片数据。
前端（请求图片）
fetch('/api/image').then(response => response.blob()).then(blob => {const img = document.createElement('img');img.src = URL.createObjectURL(blob);document.body.appendChild(img);});
后端（Python Flask）
@app.route('/api/image', methods=['GET'])
def send_image():with open('image.png', 'rb') as f:image_data = f.read()return image_data, 200, {'Content-Type': 'image/png'}

总结

Content-Type用途前端常用方法后端处理方式
application/jsonJSON 数据JSON.stringify()request.get_json()
application/x-www-form-urlencoded表单键值对数据URLSearchParams()request.form
multipart/form-data文件和表单混合数据FormData()request.files + request.form
text/plain纯文本数据直接传字符串request.data.decode()
text/htmlHTML 内容response.text()返回字符串并设置 Content-Type
application/octet-stream二进制数据（文件下载）response.blob()读取文件并设置 Content-Type
image/png图片数据response.blob()读取图片并设置 Content-Type

根据实际需求选择合适的 Content-Type 是前后端通信的关键，可以提高数据解析的正确性和系统的兼容性。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/62986.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【ArkTS】使用AVRecorder录制音频 --内附录音机开发详细代码

【ArkTS】使用AVRecorder录制音频 --内附录音机开发详细代码

系列文章目录 【ArkTS】关于ForEach的第三个参数键值 【ArkTS】“一篇带你读懂ForEach和LazyForEach” 【小白拓展】 【ArkTS】“一篇带你掌握TaskPool与Worker两种多线程并发方案” 【ArkTS】 一篇带你掌握“语音转文字技术” --内附详细代码 【ArkTS】技能提高–“用户授权”…
阅读更多...
P1319 压缩技术 P1320 压缩技术（续集版）

P1319 压缩技术 P1320 压缩技术（续集版）

题目传送门 P1319 压缩技术 P1320 压缩技术&#xff08;续集版&#xff09; P1319 压缩技术 输入格式 数据输入一行&#xff0c;由空格隔开的若干个整数&#xff0c;表示压缩码。 其中&#xff0c;压缩码的第一个数字就是 N N N&#xff0c;表示这个点阵应当是 N N N\t…
阅读更多...
【CSS】一篇掌握CSS

【CSS】一篇掌握CSS

不是因为有了希望才去坚持,而是坚持了才有了希望 目录 一.导入方式 1.行内样式 2.内部样式 3.外部样式(常用) 二.选择器 1.基本选择器(常用) 1.1标签选择器 1.2类选择器 1.3id选择器 2.层次选择器 2.1后代选择器 2.2子选择器 2.3相邻兄弟选择器 2.4通用兄弟选择器…
阅读更多...
linux 获取公网流量 tcpdump + python + C++

linux 获取公网流量 tcpdump + python + C++

前言 需求为&#xff0c;统计linux上得上下行公网流量&#xff0c;常规得命令如iftop 、sar、ifstat、nload等只能获取流量得大小&#xff0c;不能区分公私网&#xff0c;所以需要通过抓取网络包并排除私网段才能拿到公网流量。下面提供了一些有效得解决思路&#xff0c;提供了…
阅读更多...
Rain后台权限管理系统，快速开发

Rain后台权限管理系统，快速开发

这段时间一直没有更新&#xff0c;因为在写一个脚手架&#xff0c;今天Rain项目终于完工&#xff0c;已经发布到github,免费使用 项目github链接 https://github.com/Rain-hechang/Rain 简介 前端采用Vue3.x、Element UI。 后端采用Spring Boot、Spring Security、Redis &…
阅读更多...
scroll-view组件，在iOS设备上禁用橡皮筋回弹效果

scroll-view组件，在iOS设备上禁用橡皮筋回弹效果

问题描述 在实现uniapp微信小程序的一个项目时&#xff0c;ios真机测试&#xff0c;scroll-view组件可以向下拉动一段距离然后又回弹。 如下图 解决方法&#xff1a; 可以通过设置scroll-view组件的属性来禁用橡皮筋回弹效果。如下&#xff0c;设置enhanced"true&…
阅读更多...
【AI系统】昇腾异构计算架构 CANN

【AI系统】昇腾异构计算架构 CANN

昇腾异构计算架构 CANN 本文将介绍昇腾 AI 异构计算架构 CANN&#xff08;Compute Architecture for Neural Networks&#xff09;&#xff0c;这是一套为高性能神经网络计算需求专门设计和优化的架构。CANN 包括硬件层面的达芬奇架构和软件层面的全栈支持&#xff0c;旨在提供…
阅读更多...
7-17 列出连通集

7-17 列出连通集

给定一个有 n 个顶点和 m 条边的无向图&#xff0c;请用深度优先遍历&#xff08;DFS&#xff09;和广度优先遍历&#xff08;BFS&#xff09;分别列出其所有的连通集。假设顶点从 0 到 n−1 编号。进行搜索时&#xff0c;假设我们总是从编号最小的顶点出发&#xff0c;按编号递…
阅读更多...
华为NPU服务器昇腾Ascend 910B2部署通义千问Qwen2.5——基于mindie镜像一路试错版（二）

华为NPU服务器昇腾Ascend 910B2部署通义千问Qwen2.5——基于mindie镜像一路试错版（二）

文章目录 前言使用docker run总结前言 我们在上一篇文章华为NPU服务器昇腾Ascend 910B2部署通义千问Qwen2.5——基于mindie镜像一路试错版（一）中，介绍了一些准备工作。 我估计这些东西下载好还是需要一点时间的，如果你幸运地通过了这些考验，还想继续的话，就来看看这一篇…
阅读更多...
在macOS上从源码部署RAGFlow-0.14.1

在macOS上从源码部署RAGFlow-0.14.1

一、macOS配置 1. macOS配置 我使用MacBook Pro&#xff0c;chip 是 Apple M3 Pro&#xff0c;Memory是18GB&#xff0c;macOS是 Sonoma 14.6.1。 2.安装Docker和Docker compose 官方要求 Docker ≥ 24.0.0 & Docker Compose ≥ v2.26.1&#xff0c;我的版本如下&#x…
阅读更多...
大数据量接口的异步处理方案详解

大数据量接口的异步处理方案详解

在现代分布式系统中&#xff0c;处理大数据量的接口是一个常见但复杂的场景。同步操作容易导致接口响应时间过长甚至超时&#xff0c;因此采用异步处理成为主流选择。本文将详细分析大数据量接口异步处理的常见方案&#xff0c;并结合实际应用场景进行优缺点对比。 1. 背景与挑…
阅读更多...
csv文件的上传、解析和获得最后的数据

csv文件的上传、解析和获得最后的数据

前端和node端解析、读取csv文件的区别 1、前端 运行环境为浏览器&#xff0c;受到浏览器安全策略的限制&#xff0c;例如跨域请求、文件访问权限等。对于大型CSV文件的处理可能会受到性能瓶颈的影响。前端运行在用户的浏览器中&#xff0c;受到浏览器安全策略的限制&#xff…
阅读更多...
在 Windows Server 2022 Datacenter 上配置 MySQL 8.0 的主从复制

在 Windows Server 2022 Datacenter 上配置 MySQL 8.0 的主从复制

在 Windows Server 2022 Datacenter 上配置 MySQL 8.0 的主从复制。以下是详细的步骤&#xff1a; 1. 使用 root 用户登录 确保你以 root 用户登录到 MySQL 服务器。 mysql -u root -p输入你的 root 密码后进入 MySQL 命令行界面。 2. 配置主服务器 (master) 2.1 编辑 my.…
阅读更多...
Git忽略除了指定文件以外的所有文件

Git忽略除了指定文件以外的所有文件

前言&#xff1a;最近发现vs很多杂七杂八的文件都被传到gitee上了&#xff0c;但是我本意只是想把一些主要的文件如 .cpp文件传到gitee&#xff0c;因此考虑到了.gitignore文件的使用。 .gitignore文件的作用 .gitignore是一个特殊的文件&#xff0c;用于告诉Git哪些文件或目录…
阅读更多...
Python学习------第十五天

Python学习------第十五天

1.异常的捕获方式&#xff1a; #基本捕获语法 try:f open("D:/abc.txt","r",encoding"UTF-8") except:print("出现异常了&#xff0c;因为文件不存在&#xff0c;我将open模式改为w模式去打开")f open("D:/abc.txt", &quo…
阅读更多...
Android 俩个主题的不同之处 “Theme.AppCompat vs android:Theme.Material.Light.NoActionBar”

Android 俩个主题的不同之处 “Theme.AppCompat vs android:Theme.Material.Light.NoActionBar”

这两种主题继承关系有明显的不同&#xff0c;具体区别如下&#xff1a; Theme.AppCompat vs android:Theme.Material.Light.NoActionBar Theme.AppCompat 是 AppCompat 支持库提供的主题&#xff0c;目的是提供向后兼容的支持&#xff0c;适用于较早版本的 Android&#xff08…
阅读更多...
什么是java方法

什么是java方法

在Java编程语言中&#xff0c;方法&#xff08;Method&#xff09;是类&#xff08;Class&#xff09;中的一个函数&#xff0c;用于执行特定的任务或计算。方法封装了一段代码&#xff0c;使其可以重复调用&#xff0c;从而提高代码的可读性和可维护性。方法的基本结构包括方法…
阅读更多...
THENA大涨将对整个DeFi市场产生怎样的影响？

THENA大涨将对整个DeFi市场产生怎样的影响？

引言 近期&#xff0c;区块链行业的一个热门项目——THENA&#xff08;THE&#xff09;代币&#xff0c;在短时间内吸引了大量投资者的目光。THE代币的价格在短短几个月内经历了显著的上涨&#xff0c;引发了市场对其背后机制的浓厚兴趣。而在THENA生态系统的成功背后&#xf…
阅读更多...
Kubernetes命名空间详解

Kubernetes命名空间详解

目录 目标 版本 官网 概述 namespace&#xff08;命名空间、名称空间&#xff09; 注意事项 基本命令 查看namespace列表 查看所有Pod的namespace 查看单个Pod的namespace 查看同一个namespace下的所有Pod 查看单个namespace资源配额 查看单个Pod详情 查看所有na…
阅读更多...
【开源】A059-基于SpringBoot的社区养老服务系统的设计与实现

【开源】A059-基于SpringBoot的社区养老服务系统的设计与实现

&#x1f64a;作者简介&#xff1a;在校研究生&#xff0c;拥有计算机专业的研究生开发团队&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的网站项目。 代码可以查看项目链接获取⬇️&#xff0c;记得注明来意哦~&#x1f339; 赠送计算机毕业设计600个选题ex…
阅读更多...
最新文章

Copyright @ 2022~2023