07HTTP实用指南 | 青训营笔记

Orphea
115 阅读8分钟

这是我参与「第四届青训营 」笔记创作活动的的第6天

PPT: bytedance.feishu.cn/file/boxcnR…

01 初识HTTP

  • Hyper Text Transfer Protocol
  • 应用层协议, 基于TCP协议
  • 请求 响应
  • 简单可扩展
  • 无状态

02 协议分析

发展

 HTTP/0.9 单行协议
     请求GET/mypage.html
     响应只有HTML文档
 ​
 HTTP/1.0 构建可扩展性
     增加了Header
     有了状态码
     支持多种文档类型
     
 HTTP/1.1 标准化协议
     链路复用
     缓存
     内容协商
     ...
     
 HTTP/2 更优异的表现
     二进制协议
     压缩header
     服务器推送
     ...
     
 HTTP/3 草案

Method

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

safe(安全的): 不会修改服务器的数据的方法

GET HEAD OPTIONS

idempotent(幂等的): 同样的请求被执行一次与连续执行多次的效果一样, 服务器的状态也一样的所有safe的方法都是idempotent

GET HEAD OPTIONS PUT DELETE

状态码

1xx提示信息, 表示请求已接收, 继续处理
2xx成功, 表示请求已被成功接收, 理解, 接受200 OK客户端请求成功
3xx重定向, 要完成请求必须进行更进一步的操作301资源(网页等)被永久转移到其它URL
302临时跳转
4xx客户端错误, 请求有语法错误或请求无法实现401Unauthorized 请求未经授权
404请求资源不存在, 可能是输入了错误的URL
5xx服务器端错误, 服务器未能实现合法的请求500服务器内部发生了不可预期的错误
504Gateway Timeout 网关或者代理的服务器无法在规定的时间内获得想要的响应

RESTful API

RESTful API: 一种API设计风格 (REST: Representational State Transfer)

  • 每一个URL代表一种资源
  • 客户端和服务器之间, 传递这种资源的某种表现层
  • 客户端通过HTTP method, 对服务器端资源进行操作, 实现"表示层状态转化"
  • 即: 用URL定位资源、用HTTP动词（GET,POST,PUT,DELETE)描述操作
请求返回码含义
GET /zoos200 OK列出所有动物园, 服务器成功返回了
POST /zoos201 CREATED新建一个动物园, 服务器创建成功
PUT /zoos/ID400 INVALID REQUEST更新某个动物园的信息(提供该动物园的全部信息), 用户发出的请求有错误, 服务器没有进行新建或修改数据的操作
DELETE /zoos/ID204 NO CONTENT删除某个动物园, 删除数据成功

常用请求头

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并且同域访问时会自动带上
Referer该页面的来源URL(适用于所有类型的请求, 会精确到详细页面地址, csrf拦截常用到这个字段)
Origin最初的请求是从哪里发起的(只会精确到端口), Origin比Referer更尊重隐私
User-Agent用户客户端的一些必要信息, 如UA头部等

常见响应头

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

缓存

强缓存

Expires

Cache-Control

  • no-cache 协商缓存验证
  • no-store 不使用任何缓存
  • max-age 单位是秒, 存储的最大周期, 相对于请求时间
  • must-revalidate 一旦资源过期, 在成功向原始服务器验证之前, 不能使用 (一般和max-age一起用)

(断开连接时, 如果过期, 可以用本地缓存. 但如果设置了must-revalidate, 本地缓存也不能用)

协商缓存

Etag/If-None-Match 基于资源的特定版本的标识符, 类似于指纹进行协商缓存

Last-Modified/If-Modified-Since 基于最后修改时间进行协商缓存

Cookie

不管前端后端, 都需要比较了解cookie

Set-Cookie - response

Name=value各种Cookie的名称和值
Expires=DateCookie的有效期, 缺省时Cookie仅在浏览器关闭之前有效
Path=Path限制指定Cookie的发送范围的文件目录, 默认为当前
Domain=Domain限制Cookie生效的域名, 默认为创建Cookie的服务域名
secure仅在HTTPS安全连接时, 才可以发送Cookie
HttpOnlyJavaScript脚本无法获得Cookie
SameSite=[NoneStrictLax]None 同站, 跨站请求都可以发送; Strict仅在同站发送; Lax允许与顶级导航一起发送, 并将与第三方网站发起的GET请求一起发送

HTTP/2

更快, 更稳定, 更简单

帧(frame): HTTP/2通信的最小单位, 每个帧都包含帧头, 至少也会标识出当前帧所属的数据流 (使用二进制编码, 较以前纯文本效率高)

消息: 与逻辑请求或响应消息对应的完整的一系列帧

数据流: 已建立的连接内的双向字节流, 可以承载一条或多条消息

HTTP/2

  • HTTP/2连接都是永久的, 而且仅需要每个来源一个连接
  • 流控制: 阻止发送方向接收方发送大量数据的机制
  • 服务器推送能力

HTTPS

  • HTTPS: Hypertext Transfer Protocol Secure
  • 经过TSL/SSL加密
  • 混用对称加密和非对称加密

03 场景分析

静态资源

静态资源部署方案: 缓存 + CDN + 文件名hash

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

登录

跨域解决方案

  • CORS

  • 代理服务器

    • 同源策略是浏览器的安全策略, 不是HTTP的. 可以采取代理服务器绕开

  • Iframe (限制较多, 使用极少)

向什么地址做了什么动作?

向目标地址进行了POST操作

携带了哪些信息, 返回了哪些信息?

携带信息

  • Post body, 数据格式为form
  • 希望获取的数据格式为json
  • 已有的Cookie

返回信息

  • 数据格式json
  • Cookie信息

下次进入页面为什么能记住登录态? ⭐

鉴权

方案1: Session + Cookie

登录成功后, 服务端根据登录信息生成Session, 并存储起来, 同时借由Set-Cookie把Session给浏览器, 浏览器下次请求会自动携带, 服务器将Session和本地存储的比较进行识别, 再作返回响应

方案2: JWT (JSON Web Token)

登录成功后, 服务器会生成token, 不会在本地存储, 直接返回给浏览器, 浏览器下次请求时带着token, 服务端会根据token看token是否有效以及是哪个用户的信息再返回响应

跳转到的网站会自动登录?

SSO: 单点登录 (Single Sign On)

发现没登录回去问SSO的Sever

04 实战

发起请求

AJAX之XHR (XHR: XMLHttpRequest)

AJAX之Fetch

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

标准库: HTTP/HTTPS

  • 默认模块, 无需安装其他依赖
  • 功能有效/不是十分友好

常用的请求库: axios

  • 支持浏览器, nodejs环境
  • 丰富的拦截器

网络优化

  • HTTP2
  • CDN动态加速
  • DNS预解析
  • 网络预连接
  • 域名的收敛和发散策略
  • 压缩
  • https性能优化

稳定性

  • 重试机制 (慎重使用, 可能造成雪崩)

    • 超时/错误

  • 缓存

  • 数据安全

05 了解更多

WebSocket

  • 浏览器与服务器进行全双工通讯的网络技术
  • 典型场景: 实时性要求高, 例如聊天室
  • URL使用ws:// 或 wss:// 等开头

QUIC

QUIC: Quick UDP Internet Connection

还在研究中

avatar
文章
阅读
粉丝