HTTP实用指南 ｜ 青训营笔记

学习前端中
37 阅读4分钟

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

一、本堂课重点内容：

讲述了HTTP协议分析、常见场景、实际应用等等。

二、详细知识点介绍：

初识HTTP

graph TB
    subgraph browser进程
   	begin(处理输入信息)
        页面加载完成
    end
    subgraph 浏览器内核
   	发起请求 --> 读取响应 --> 渲染
    end
    begin(处理输入信息) --> 发起请求
    渲染 --> 页面加载完成
    发起请求 --> server --> 读取响应

HTTP

  • 超文本传输协议
  • 应用层协议，基于TCP协议
  • 请求响应
  • 简单可扩展
  • 无状态（不知道之前携带的信息）

协议分析

发展历程
协议内容
HTTP/0.9请求GET/mypage.html
响应只有html文档
HTTP/1.0增加了HEADER
有了状态码
支持多种文档类型
HTTP/1.1链接复用
缓存
内容协商
HTTP/2二进制协议
压缩header
服务器推送
HTTP/3草案
报文
RequestsResponses
start-linemathod
path version		version statuscode(状态码)
statusMessage
HTTP headers
empty line空白行
body

method:

  • GET:获取资源，读
  • POST:提交
  • PUT:已有载体的替换
  • DELETE:删除
  • HEAD:与GET一致，没有响应体
  • CONNECT:建联
  • OPTIONS:通信选项的前置请求
  • TRACE:测试
  • PATCH:对资源应用部分修改
  1. safe:不会修改服务器数据(GET HEAD OPTIONS)
  2. idempotent(幂等):请求执行一次和多次效果是一样的，服务器的状态也是一样的，所有safe都是idempotent的(GET HEAD OPTIONS PUT DELETE)

状态码

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

RESTful API API设计风格

  1. 每个URI代表一种资源
  2. 客户端和服务器之间，传递这种资源的某种表现层
  3. 客户端通过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并且同域访问时会自动带上
  • 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传给客户端
  • Server 服务器的一些相关信息
  • Access-Control-Allow-Origin 服务器端允许的请求Origin头部(譬如为*)

强缓存 有就可以用

  • Expires，时间戳
  • Cache-Control
    • 可缓存性
      • no-cache:协商缓存验证
      • no-store:不使用任何缓存
    • 到期
      • max-age:单位是秒，存储的最大周期，相对于请求的时间。
    • 重新验证*重新加载
      • must-revalidate:一旦资源过期，在成功向原始服务器验证之前，不能使用

协商缓存 有了以后需要和服务器联系是否使用该缓存

  • Etag/lf-None-Match:资源的特定版本的标识符，类似于指纹
  • Last-Modified/lf-Modified-Since:最后修改时间

image.png

Set-Cookie-response

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