【青训营】- 前端开发HTTP实用指南

吃了一天糖葫芦
799 阅读12分钟

什么是HTTP、其基本特点

输入打开一个网址后发生了什么

主要学习发起请求→读取响应这一阶段

主要学习应用层

什么是HTTP协议

1. Hyper Text Transfer Protocol 超文本传输协议

  • HTTP协议能承载很多类型的文本：HTML CSS JS Web APIs

2. 应用层协议，基于TCP协议

  • HTTP是应用层的协议，基于传输层的TCP协议，TCP是一个可靠的协议

3. 请求-响应

  • HTTP是一个C/S模型的协议

4. 简单可扩展

  • 协议头举例：
  • 在协议头里可以增加一些内容，可扩展

5. 无状态

协议对于交互性场景没有记忆能力。在新请求来的时候，服务器是无法记住上一个请求来自哪里的

协议分析（报文结构、发展历程）

发展

协议关键点特点
HTTP/0.9单行协议✔ 请求GET/mypage.html
✔ 响应只有HTML文档
HTTP/1.0构建可扩展性✔ 增加了Header
✔ 有了状态码
✔ 支持多种文档类型
HTTP/1.1标准化协议✔ 链接复用
✔ 缓存
✔ 内容协商
HTTPS
HTTP/2更优异的表现（数据传输、功能增强）✔ 二进制协议
✔ 压缩header
✔ 服务器推送
HTTP/3草案

HTTP/1.1报文解析

1. 案例

请求和响应的结构一致

案例1：
案例2：

构成：

  • 起始行（请求/响应行）：Request：Method Path Version | Responses: Version StatusCode StatusMessage
  • headers（请求/响应头）信息 协议头
  • 空行分割
  • 实体数据部分（请求/响应体）（浏览器提交上去的信息/服务端返回的信息）

2. HTTP报文Method方法

Method描述
GET从服务器中请求一个指定资源，该method只被用于获取数据
HEAD请求一个与GET请求的响应相同的响应，但只从服务器获取文档的响应首部
POST将实体提交到指定的资源（向服务器输入数据），通常导致在服务器上的状态变化或副作用
PUT用请求有效载荷替换目标资源的所有当前表示（将请求的主体部分存储在服务器中，如上传文件）
DELETE请求删除服务器上指定的资源
TRACE沿着到目标资源的路径执行一个消息环回测试（追踪请求到达服务器中间经过的代理服务器）
OPTIONS用于描述目标资源的通信选项（请求服务器返回对指定资源支持使用的请求方法）
CONNECT建立一个到由目标资源标识的服务器的隧道
PATCH用于对资源应用部分修改

Methond

  • Safe（安全的）： GET HEAD OPTIONS
    不会修改服务器的数据的方法
  • Idempotent（幂等）：GET HEAD OPTIONS PUT DELETE
    同样的请求被执行一次与被执行多次的效果是一样的，服务器的状态也是一样的，
  • 所有safe的方法都是Idempotent的，所有安全的请求都不会修改服务器的数据，因此所有安全的请求都是幂等的。

3. 状态码

注： 301表示永久重定向，302表示暂时重定向，304表示资源没有修改

4. RESTful API

RESTful API： 一种API设计风格；REST-Representational State Transfer

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

5. 常用请求头

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

缓存相关

6. 常用响应头

响应头描述
Content-Type服务端返回的实体内容的类型（WEB服务器告诉浏览器自己响应的对象的类型和字符集）
Cache-Control指定请求和响应遵循的缓存机制，如no-cache
Last-Modified请求资源的最后修改时间
Expires应该在什么时候认为文档已经过期，从而不再缓存它，重新从服务器获取，会更新缓存
Max-age客户端的本地资源应该缓存多少秒，开启了Cache-Control后有效
ETag根据文档实体信息内容生成的，是资源的特定版本的标识符，类似于指纹，和If-None-Match 配合使用
Set-Cookie设置和页面关联的cookie，服务器通过这个头部把cookie传给客户端
ServerHTTP服务器的相关信息。例如：Server: Microsoft-IIS/7.5、Server：Apache-Coyote/1.1。此域能包含多个产品标识和注释，产品标识一般按照重要性排序。
Access-Control-Allow-Origin服务器端允许的请求Origin头部（譬如为*）指定哪些网站可以跨域源资源共享

缓存相关

7. 缓存

缓存相关头部：
强缓存协商缓存
在缓存有效期内，一定要使用本地资源每个请求都有一个请求-响应的过程，缓存每次都需要C/S彼此认证商量一下，有个沟通的过程。协商缓存相关头部成对出现。
Expires： 时间不准
Cache-Control：
1. max-age：缓存时间计算的方式是距离发起时间的秒数，超过间隔的秒数缓存失效。
2. no-cache：不使用强缓存，需要与服务器验证缓存是否新鲜。
3. no-store：禁止使用缓存（包括协商缓存），每次都向服务器请求最新的资源。
4. must-revalidate：在缓存过期前可以使用，过期后必须向服务器验证。		ETag/if-None-Match，hash码，代表的是一个资源的标识符。
Last-Modified/If-Modified-Since，文件的最后修改时间。
浏览器判断缓存的过程：
  • 注：请求状态码为200，不一定会发起一个真实的请求，有可能是一个本地的强缓存。 image.png

8.cookie

Cookie帮助实现了http无状态的协议，也增强了一些与状态相关的特性。

  • HTTP请求报文通过cookie字段通知服务端当前页面的域生效中的cookie
  • HTTP响应报文通过Set-cookie通知客户端需要保存哪些的cookie。响应头里set-cookie设置哪些信息：
    键值对描述
    Name=value各种cookie的名称和值
    Expire=DateCookie的有效期，默认Cookie仅在浏览器关闭前有效（控制相关）
    Path=Path限制指定Cookie的发送范围的文件目录，默认为当前（生效的目录范围）
    Domain=Domain限制cookie生效的域名，默认为创建cookie的服务域名（域名）
    secure仅在安全连接时，才可以发送Cookie
    HttpOnlyjs脚本有相关API操作cookie，可能会导致一些cookie泄露风险，设置HttpOnly使得js脚本无法获得Cookie（安全相关）
    SameSite[NoneStrictLax(默认)]None同站、跨站请求都可以发送
    Strict仅在同站发送
    允许与顶级导航一起发送，并将与第三方网站发起的GET请求一起发送

发展-HTTP/2与HTTPS

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

新特性1：
  • 帧：HTTP/2通信的最小单位，每个帧都包含帧头，至少也会标识出当前帧所属的数据流。
  • 二进制传输，数据压缩，降低包体积。
新特性2：

  • 消息：（与逻辑请求或响应消息对应的完整的）一系列帧的聚合。

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

  • 交错发送，接受方重组织。

新特性3：
  • HTTP/2连接都是永久的，而且仅需要每个来源一个连接。
  • 流控制：阻止发送方向接收方发送大量数据的机制。
  • 服务器推送：

HTTPS

HTTPS：Hypertext Transfer Protocol Secure
  • 经过TSL/SSL加密
加密：
  • 对称加密：加密和解密都是使用同一个密钥
  • 非对称加密：加密和解密需要使用两个不同的密钥（公钥（public key）和私钥（private key））

场景分析

静态资源

1. 案例：

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

  • 缓存：通过协议头的设置，使得资源优先从本地读取，响应时间很快。
  • CDN：Content Delivery Network 内容分发网络，通过用户就近性和服务器负载的判断，CDN确保内容以一种极为高效的方式请求提供服务。

登陆

Request Headers:

:authority:sso.toutiao.com//地址
:method:POST//动作：POST
:path:/quick_login/v2/?aid=24&account_sdk_source=sso&language=zh
:scheme:https
accept:application/json, text/javascript//想收到的是json格式
accept-encoding:gzip, deflate, br
accept-language:zh-CN,zh;q=0.9
content-length:117
content-type:application/x-www-form-urlencoded//携带实体信息类型：form 关联form data
cookie:_S_DPR=1; _S_IPAD=0; _S_WIN_WH=1366_625; ttwid=1%7CvYS_NyRV1Ai9vQseqGzuvE1tZC9HRh0FJIkopl7L_bw%7C1630417245%7C13945c885fd479252cc9b7b0a8db451fc0accedd0ed9a70a3ab599e3f3aa3fa0; passport_csrf_token_default=1b574667f3040e78ca76c4c30363806f; passport_csrf_token=1b574667f3040e78ca76c4c30363806f; MONITOR_WEB_ID=74dbd20c-75a9-4373-b1eb-79d08315118f; s_v_web_id=verify_kt05zmwq_0ZZp9KvV_Cklo_4Rpt_8SvP_C9rXaRkL4LSF
origin: https://sso.toutiao.com//请求来源
referer:https://sso.toutiao.com/login/ //请求来源
sec-ch-ua:"Chromium";v="92", " Not A;Brand";v="99", "Google Chrome";v="92"
sec-ch-ua-mobile:?0
sec-fetch-dest:empty
sec-fetch-mode:cors
sec-fetch-site: same-origin
user-agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.107 Safari/537.36 //Chrome浏览器
x-tt-passport-csrf-token: 1b574667f3040e78ca76c4c30363806f //添加的自定义协议，防止csrf攻击http是可扩展的协议

1630420618(1).jpg

Response Headers：有很多set-cookie:

content-encoding: gzip
content-length:198
content-type: application/json //数据格式为json
set-cookie:passport_auth_status=2c38778eef31cd8c6efdddebef79ba1f%2C; Path=/; Domain=toutiao.com; Max-Age=2592000; HttpOnly//种在toutiao.com根域名下 有效期2592000s 禁止js去获取
set-cookie: passport_auth_status_ss=2c38778eef31cd8c6efdddebef79ba1f%2C; Path=/; Domain=toutiao.com; Max-Age=2592000; HttpOnly; Secure; SameSite=None
set-cookie: sso_auth_status=d892c172d477b9d8f53e3a6229285dd8; Path=/; Domain=toutiao.com; Max-Age=2592000; HttpOnly
set-cookie:sso_auth_status_ss=d892c172d477b9d8f53e3a6229285dd8; Path=/; Domain=toutiao.com; Max-Age=2592000; HttpOnly; Secure; SameSite=None
set-cookie: sso_uid_tt=b2ab94b926277554cef74291a1e23935; Path=/; Domain=toutiao.com; Max-Age=5184000; HttpOnly
set-cookie:sso_uid_tt_ss=b2ab94b926277554cef74291a1e23935; Path=/; Domain=toutiao.com; Max-Age=5184000; HttpOnly; Secure; SameSite=None
set-cookie:toutiao_sso_user=893aaca56a87090a729ad0eede82e55c; Path=/; Domain=toutiao.com; Max-Age=5184000; HttpOnly
set-cookie:toutiao_sso_user_ss=893aaca56a87090a729ad0eede82e55c; Path=/;Domain=toutiao.com; Max-Age=5184000; HttpOnly; Secure; SameSite=None
set-cookie:n_mh=BeOyQzO-cLr1SIXI014bhcrMEP81myfFv6SWp805Fpc; Path=/; Domain=toutiao.com; Max-Age=10368000; HttpOnly
timing-allow-origin: *
vary:Accept-Encoding
via:vcache6.cn2586[317,0]
x-janus-mini-api-forward:Janus-Mini(fast)
x-tt-logid: 202108312229170102121380514845D63E

1. 向什么地址做了什么动作？

  • 使用POST方法
  • 目标域名：sso.toutiao.com
  • 目标：path:/quick_login/v2 2. 携带了哪些信息，返回了哪些信息？
  • 携带信息
    • Post body，数据格式为form。
    • 希望获取的数据格式为json。
    • 已有的cookie
  • 返回信息

    • 数据格式json

    • 多种cookie的信息

3. 下一次进入页面为什么能记住登录态呢？(cookie与token)

  • Session+cookie
    • Session是服务端生成的用户的唯一标记，服务端解析后即可知是哪个用户，进而返回用户相关信息。
  • JWT（JSON web token）
    • token没有存储在cookie里，客户端发起GET请求时不能自动带上，需要操作请求本身把token放到合适位置，进而发送给服务端。
    • 场景：三方认证

富媒体

1. 视频播放

image.png

image.png

image.png

  • 状态码：206代表Partial Content，返回的是部分的资源，播放暂停 和拖动视频进度条的过程中，会一直发起请求，这些请求都是整个视频资源的一部分。
  • 如何决定当前返回的视频资源是整个资源的哪一部分？： Request Headers: range；Response: Content-Range
  • 渐进式播放 image.png
  • 视频直播协议 image.png

2. 文件上传

  • 如果你的页面需要支持图片上传该怎么做？→ Form表单提交
  • 如果你的页面需要支持视频上传该怎么做？ → 资源大，上传时间可能很长，利用一个请求，一旦失败需要重头开始 → web文件上传的解决方案 image.png

实际应用（浏览器、node中的使用）

参考

www.cnblogs.com/lauhp/p/897…

www.cnblogs.com/brxHqs/p/11…

avatar
文章
阅读
粉丝