HTTP 使用指南 | 青训营笔记

24 阅读5分钟

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


一、本堂课重点内容:

  1. 初识:什么是HTTP,其基本特点
  2. 协议分析:报文结构、发展历程
  3. 常见场景:静态资源、登录
  4. 实际应用:浏览器与node中使用
  5. 了解更多:不止HTTP一个选择

二、详细知识点介绍:

2.1 初识HTTP

浏览器地址栏输入URL,到显示界面,经历的过程:

image.png

HTTP(Hyper Text Transfer Protocol),超文本传输协议

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

image.png

2.2 协议分析

发展

image.png

报文

image.png

字段分析

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

特性:

  • Safe(安全的):上述方法中,对于其中不会修改服务器数据的方法,我们认为其是安全的,例如,GET、HEAD、OPTIONS
  • Idempotent(幂等的):对于同样的请求执行一次与执行多次的效果是一样的,服务器的状态也是一样的,例如,GET、HEAD、OPTIONS、PUT、DELETE

所有的safe方法都是idempotent的

状态码

image.png

  • 200 OK-客户端请求成功
  • 301 - 资源(网页等)被永久转移到其他URL
  • 302 - 临时跳转
  • 401 Unauthorized - 请求未经授权
  • 404 - 请求资源不存在
  • 500 - 服务器内部错误
  • 504 Gated Timeout - 网关或代理的服务器无法在规定时间内获得想要的响应

常用请求头

名称说明
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头部等

常用响应头

image.png

缓存

image.png must-revalidate会与max-age结合使用,如果缓存中设置了must-revalidate且max-age到期,即使本地有缓存也无法使用。

image.png

Cookie

当用户第一次访问并登陆一个网站的时候,cookie的设置以及发送会经历以下4个步骤:

(1)客户端发送一个请求到服务器 → (2)服务器发送一个HttpResponse响应到客户端,其中包含Set-Cookie的头部 → (3)客户端保存cookie,之后向服务器发送请求时,HttpRequest请求中会包含一个Cookie的头部 → (4)服务器返回响应数据

属性项属性项介绍
NAME=VALUE键值对,可以设置要保存的 Key/Value,注意这里的 NAME 不能和其他属性项的名字一样
ExpiresCookie的有效期,在设置的某个时间点后该 Cookie 就会失效
Domain限制Cookie 生效的域名,默认为创建cookie的服务域名
Path限制指定Cookie的发送范围的文件目录,默认为当前
Secure仅在HTTPS安全连接时,才可以发送Cookie
HTTPOnlyJavascript脚本无法获得Cookie
SameSite①None同站、跨站请求都可以发送
②Strict仅在同站发送
③允许与顶级导航一起发送,并将与第三方网站发起的GET请求一起发送

HTTP/2

HTTP/2更快、更稳定、更简单

  • 帧(frame):HTTP/2通信的最小单位,每个帧都包含帧头,至少也会标识出当前帧所属的数据流。
  • 消息:与逻辑请求或响应消息对应的完整的一系列帧。
  • 数据流:已建立的连接内的双向字节流,可以承载一条或多条消息。

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

HTTPS

https是http经过TSL/SSL加密后得到的

2.3场景分析

静态资源方案

静态资源方案:缓存 + CDN + 文件名hash 其中:文件名hash可以确保当前文件是最新的

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

跨域

解决方法:

  • CORS
  • 代理服务器
    • 同源策略是浏览器的安全策略,不是HTTP的
  • Iframe - 不方便,限制过多,实际场景中使用较少

下一次进入页面为什么能记住登陆状态?

鉴权: Session + cookie

JWT(JSON web token)

发起请求

  1. AJAX之XHR XHR:XMLHttpRequest xhr.readyState属性

  1. AJAX之Fetch
  • XMLHttpRequest的升级版
  • 使用promise
  • 模块化设计,Response,Request,Header对象
  • 通过数据流处理对象,支持分块读取
  1. axios库
  • 支持浏览器、nodejs环境
  • 丰富的拦截器

用户体验方面

  1. 网络优化

  1. 稳定性

  • 重试是保证稳定的有效手段,但要防止加剧恶劣情况
  • 缓存合理使用,作为最后一道防线

2.5 了解更多

三、课后个人总结:

  • 跨域、缓存面试必问

四、引用参考:

  • 课程课件
  • 图解HTTP