HTTP 使用指南 | 青训营笔记

皮卡coder
112 阅读7分钟

HTTP 使用指南 | 青训营笔记

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

1.初识

image.png

什么是 HTTP

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

image.png

2.协议分析

发展历程

image.png

报文

Method

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

特点

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

状态码

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

image.png

RESTful API

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

  1. 每一个URI代表一种资源；
  2. 客户端和服务端之间，传递这种资源的某种表现层；
  3. 客户端通过HTTP method，对服务器端资源进行操作，实现"表现层状态转化"。

image.png

常用请求头

  • Accept 接收类型，表示浏览器支持的MIME类型(对标服务端返回的Content-Type)
  • Content-Type 客户端发送出去实体内容的类型
  • Cache-Control 指定请求和响应遵循的缓存机制，如no-cache
  • lf-Modified-Since 对应服务端的Last-Modified，用来匹配看文件是否变动，只能精确到1s之内
  • Expires 缓存控制，在这个时间内不会请求，直接使用缓存，服务端时间
  • Max-age 代表资源在本地缓存多少秒，有效时间内不会请求，而是使用缓存
  • lf-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/If-None-Match：资源的特定版本的标识符，类似于指纹
  • Last-Modified/If-Modified-Since：最后修改时间

image.png

cookie

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请求一起发送

HTTP/2概述：更快、更稳定、更简单

  • 帧（frame）：HTTP/2 通信的最小单位，每个帧都包含帧头，至少也会标识出当前帧所属的数据流。
  • 二进制
  • 消息：与逻辑请求或响应消息对应的完整的一系列帧。
  • 数据流：已建立的链接内的双向字节流，可以承载一条或多条消息。
  • 交错发送，接收方重组织

image.png

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

image.png

HTTPS概述

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

image.png

3.常见场景

  1. 打开 chrome
  2. 输入 www.toutiao.com
  3. 打开控制台
    • 右键 -> 检查
    • F12
  4. 切换到 network

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

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

CND简单原理图

image.png

登录

  • 业务场景
    • 表单登录
    • 扫码登录
  • 技术方向
    • SSO

跨域

  • 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

跨域解决方案

  • CORS
  • 代理服务器
    • 同源策略是浏览器的安全策略，不是HTTP的
  • Iframe
    • 诸多不便

image.png

鉴权

  • Session + cookie

image.png

  • JWT（JSON web token）

image.png

4.实际应用

浏览器篇

AJAX 之 XHR

  • XHR：XMLHttpRequest
  • readyState

image.png

AJAX 之 Fetch

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

node篇

标准库：HTTP/HTTPS

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

常用的请求库：axios

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

网络优化

image.png

稳定性

image.png

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

5.了解更多

扩展-通信方式

WebSocket

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

image.png

QUIC：Quick UDP Internet Connection

  • 0-RTT 建联（首次建联除外）。
  • 类似 TCP 的可靠传输。
  • 类似 TLS 的加密传输，支持完美前向安全。
  • 用户空间的拥塞控制，最新的 BBR 算法。
  • 支持 h2 的基于流的多路复用，但没有 TCP 的 HOL 问题。
  • 前向纠错 FEC。
  • 类似 MPTCP 的 Connection migration。

image.png

image.png

avatar
文章
阅读
粉丝