web: http请求(自用总结)

一、结构示意图(完整结构)

1.1 示例图

复制代码
┌──────────────────────────────────────┐
│ 请求行                               │
│ POST /api/login HTTP/1.1             │
├──────────────────────────────────────┤
│ 请求头                               │
│ Host: api.example.com                │
│ Content-Type: application/json       │
│ Authorization: Bearer xxx            │
│ User-Agent: Chrome/120               │
├──────────────────────────────────────┤
│ 空行                                 │
│                                      │
├──────────────────────────────────────┤
│ 请求体(可选)                       │
│ {                                    │
│   "username": "admin",             │
│   "password": "123456"             │
│ }                                    │
└──────────────────────────────────────┘

1.2 说明

组成部分 格式 / 结构 作用说明 示例 / 说明
请求行(Request Line) 请求方法 请求路径 HTTP版本 指定访问哪个资源、使用什么方式以及 HTTP 协议版本 GET /user/info HTTP/1.1
请求头(Request Headers) Header-Name: Header-Value 描述请求的附加信息,如数据类型、认证信息、客户端信息等 Host、Content-Type、Authorization、Cookie
空行 无内容 分隔请求头与请求体,HTTP 协议强制要求 必须存在,不能为空
请求体(Request Body) 自定义数据内容 客户端向服务器提交的实际业务数据 常见于 POST / PUT / PATCH;JSON、表单、文件

二、请求方法

2.1 请求方法辨析

请求方法 是否有请求体 主要用途 是否幂等 是否安全 典型使用场景
GET 获取资源 查询用户信息、列表查询
POST 新增资源 / 提交数据 用户注册、登录、表单提交
PUT 整体更新资源 更新用户全部信息
PATCH 局部更新资源 修改用户部分字段
DELETE 可选 删除资源 删除用户、删除订单
HEAD 仅获取响应头 检查资源是否存在
OPTIONS 查询服务器支持的方法 跨域预检(CORS)

三、请求头

3.1 常见Header-Name 和 Header-Value

请求头名称 常见值示例 作用说明 典型使用场景
Host api.example.com 指定目标服务器域名 HTTP/1.1 必需,用于虚拟主机
Content-Type application/json 指定请求体数据格式 提交 JSON、表单、文件
Content-Length 348 请求体长度(字节) 服务端读取请求体
Authorization Bearer eyJhbGciOiJIUzI1NiIs... 身份认证信息 JWT、OAuth
Cookie JSESSIONID=xxx 客户端携带的 Cookie 会话保持
User-Agent Mozilla/5.0 客户端标识 浏览器 / 设备识别
Accept application/json 客户端期望的响应类型 内容协商
Accept-Encoding gzip, deflate, br 客户端支持的压缩格式 响应压缩
Accept-Language zh-CN,zh;q=0.9 客户端语言偏好 国际化
Connection keep-alive 连接管理方式 长连接 / 短连接
Referer https://example.com 请求来源页面 防盗链、统计
Origin https://example.com 请求来源域 CORS 跨域校验

四、请求体

4.1 常见请求体类型

请求体类型 Content-Type 值 数据示例 常见使用场景
JSON application/json { \"username\": \"admin\", \"password\": \"123456\" } 接口调用、前后端分离
表单(URL Encoded) application/x-www-form-urlencoded username=admin&password=123456 传统表单提交
表单(Multipart) multipart/form-data 文件 + 表单字段 文件上传
XML application/xml <user><name>admin</name></user> 老系统、配置接口
纯文本 text/plain hello world 简单文本提交
二进制流 application/octet-stream 二进制数据 文件流、下载上传
相关推荐
全栈派森2 小时前
Flutter 实战:基于 GetX + Obx 的企业级架构设计指南
前端·flutter
支撑前端荣耀2 小时前
从零实现前端监控告警系统:SMTP + Node.js + 个人邮箱 完整免费方案
前端·javascript·面试
进击的野人2 小时前
Vue.js 插槽机制深度解析:从基础使用到高级应用
前端·vue.js·前端框架
重铸码农荣光2 小时前
🎯 从零搭建一个 React Todo 应用:父子通信、状态管理与本地持久化全解析!
前端·react.js·架构
用户4099322502122 小时前
Vue3 v-if与v-show:销毁还是隐藏,如何抉择?
前端·vue.js·后端
Mr_chiu2 小时前
🚀 效率暴增!Vue.js开发必知的15个神级提效工具
前端
shanLion2 小时前
Vite项目中process报红问题的深层原因与解决方案
前端·javascript
烟袅2 小时前
从零构建一个待办事项应用:一次关于组件化与状态管理的深度思考
前端·javascript·react.js
前端小万2 小时前
草稿
前端