HTTP实用指南

初识
协议分析
常见场景
实际应用
了解更多

初始HTTP

Hyper Text Transfer Protocol 超文本传输协议
应用层协议、基于TCP协议
请求响应
简单可扩展
无状态

HTTP每个请求都是孤立的

协议分析

单行协议：1请求GET/mypage.html（目标地址） 2响应只有HTML文档
构建可扩展性：1增加了Header 2有了状态码 3支持多种文档类型
准化协议： 1链接复用 2缓存 3内容协商...(使用时间最久的一个版本)
更优异的表现： 1 二进制协议 2压缩header 3服务器推送...
草案

Method

GET：请求一个指定资源的表示形式，使用GET的请求应该只被用于获取数据（读的请求）
POST：用于将实体提交到指定的资源，通常导致在服务器上的状态变化或副作用（提交的请求）
PUT：用请求有效载荷替换目标资源的所有当前表示（已有载体的替换）
DELETE：删除指定的资源
HEAD：请求一个与GET请求的响应相同的响应，但没有响应体
COONNECT：建立一个到由目标资源标识的服务器的隧道
OPTIONS：用于描述目标资源的通信选项
TRACE：沿着到目标资源的路径执行一个消息环回测试
PATCH：用于对资源应用部分修改

Method

Safe（安全的） ：不会修改服务器的数据的方法 eg:GET（读方法，不会去修改数据） HEAD OPTIONS
Idempotent(幂等) ：
- 同样的请求被执行一次与连续执行多次的效果是一样的，服务器的状态也是一样的
- 所有safe的方法都是Idempotent eg： GET HEAD OPTIONS PUT DELETE

状态码

1xx：指示信息，表示请求已接收，继续处理
2xx：成功，表示请求已被成功接收、理解、接收
3xx：重定向，要完成请求必须进行更进一步的操作
4xx：客户端错误，请求有语法错误或请求无法实现
5xx：服务器端错误，服务器端未能实现合法的请求

200 ok-客户端请求成功
301 - 资源（网页等）被永久转移到其他URL
302 - 临时跳转
401 Unauthorized - 请求未经授权
404 - 请求资源不存在，可能是输入了错误的URL（目标地址）
500 - 服务器内部发生了不可预期的错误
504 Gateway Timeout - 网关或者代理的服务器无法在规定的时间内获得想要的响应

RESTful API

一种API设计风格

每一个URL代表一种资源
客户端和服务器之间，传递这种资源的某种表现层
客户端通过HTTP method，对服务器端资源进行操作，实现”表现层状态转化“

常用请求头

Accept：接收类型，表示浏览器支持的MIME类型（对标服务端返回的Content-Type）
Content-Type：客户端发送出去实体内容的类型
Cache-Control：指定请求和响应遵循的缓存机制，如no-cache
If-Modified-Since：对于服务器端的last-Modified,用来匹配看文件是否变动，只能精确到1s之内（有着缓存相关的能力）
Expires：缓存控制，在这个时间内不会请求，直接使用缓存，服务端时间
Max-age：代表资源在本地缓存多少秒，有效时间内不会请求，而是使用缓存
If-None-Match：对应服务端的ETag，用来匹配文件内容是否改版（非常精确）（有着缓存相关的能力）
Cookie：有cookie并且同域访问时会自动带上（HTTP通常是一个无状态的请求，可以利用cookie带上一些状态信息，比如用户是否登录）
Referer：该页面的来源URL（适用于所有类型的请求，会精确到详细页面地址，csrf拦截常用到这个字段）
Origin：最初的请求是从哪里发起的（只会精确到端口），Origin比Referer更尊重隐私（请求来源相关的字段）
User-Agent：存储了一些用户客户端的一些必要信息，如UA头部等

常用响应头

Content-Type:服务端返回的实体内容的类型
Cache-Control：指定请求和响应遵循的缓存机制，如no-cache
Last-Modified：请求资源的最后修改时间
Expires：应该在什么时候认为文档已经过期，从而不在缓存它
Max-age：客户端的本地资源应该缓存多少秒，开启了Cache-Control后有效
ETag：资源的特定版本的标识符，Etags类似于指纹
Set-Cookie：设置和页面关联的cookie，服务器通过这个头部把cookie传给客户端（cookie信息有一些怎样的控制）
Server：服务器的一些相关信息
Access-Control-Allow-Origin：服务器端允许的请求Origin头部（譬如未*）（Access-Control都是用作一些访问控制）

缓存（分两类）

强缓存（如果本地有了，就直接用就可以了）
协商缓存（本地有了，但能不能用，一定要和server端，做一个通信，彼此验证一下，才是协商缓存）

1693026505035

1693027419455

HTTP/2概述

更快、更稳定、更简单

帧：
- HTTP/2通信的最小单位，每个帧都包含帧头，至少也会标识出当前帧所属的数据流
- 帧的传输过程中是以二进制编码的形式
消息：
- 与逻辑请求或响应消息对应的完整的一些列帧
数据流
- 已建立的连接内的双向字节流，可以承载一条或多条消息
- 交错发送，接收方重组织
HTTP/2连接都是永久的，而且仅需要每个来源一个连接
流控制：阻止发送方向接收方发送大量数据的机制
服务器主动推送（比较智能的能力）

场景分析

打开浏览器
输入：www.toutiao.com
打开控制台
- 右键->检查
- F2
切换到network
切换到CSS

找到index开头css结尾就可以

可以看一下状态码是多少

然后刷新一下页面，看一下状态码是否改变
想一下200状态码是一定发起了请求吗

静态资源方案：缓存+CDN+文件名hash

CDN：Content Delivery Network
通过用户就近性和服务器负载的判断，CDN确保内容以一种极为高效的方式为用户的请求提供服务

业务场景
- 表单登录
- 扫码登录

跨域的问题会导致出现options的请求

什么是跨域

origin由这三部分组成

其中这三部分有一个不同，就是跨域，若相同，即是同域

如何解决跨域

CORS（Cross-Origin Resource Sharing）
预请求：获知服务端是否允许该跨源请求（复杂请求）
相关协议头
- Access-Control-Allow-Origin
- Access-Control-Expose-Headers
- Access-Control-Max-Age
- Access-Control-Allow-Credentials
- Access-Control-Allow-Methods
- Access-Control-Allow-Headers
- Access-Control-Request-Method
- Access-Control-Request-Headers
- Origin
代理服务器
- 同源策略是浏览器的安全策略，不是HTTP的
Iframe
- 诸多不便

想什么地址做了什么动作

使用POST方法
目标域名：sso.toutiao.com
目标path/quick_login/v2/

携带了哪些信息，返回了哪些信息

携带信息：
- Post body，数据格式为form
- 希望获取的数据格式为json
- 已有的cookie
返回信息
- 数据格式json
- 种cookie的信息

实战

如何发起HTTP协议

AJAX之XHR

XHR：XMLHttpRequest
readyState
- 0:代理被创建，但尚未调用open（）方法
- 1：open（）方法已经被调用
- 2:send（）方法已经被调用，并且头部和状态已经可获得
- 3：下载中，responseText属性已经包含部分数据
- 4：下载操作已完成

Fetch

XMLHttpRequet的升级版
使用Promise
模块化设计，Response，Request，Header对象
通过数据流处理对象，支持分块读取

重试是保证稳定的有效手段，但要防止加剧恶劣情况

缓存合理使用，作为最后一道防线

感受

还是那句话，都需要实操，多去实践一下。

第六届字节跳动青训营第七课 ｜ 青训营