HTTP 实用指南 ｜ 青训营笔记

用户4387932835745
86 阅读6分钟

什么是 HTTP

Hyper Text Transfer Protocol 超文本传输协议

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

协议分析

报文

2.png

Method

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

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

  • GET
  • HEAD
  • OPTIONS

idempotent(幂等)：同样的请求被执行一次与连续执行多次的效果是一样的，服务器的状态也是一样的

  • 所有safe的方法都是幂等的
  • PUT
  • DELETE

状态码

3.png

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

RESTful API

一种API设计风格，REST - Representational State Transfer

  • 每一个URI代表一种资源
  • 客户端和服务器之间，传递这种资源的某种表现层:
  • 客户端通过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/If-None-Match : 资源的特定版本的标识符，类似于指纹
  • Last-Modified/lf-Modified-Since:最后修改时间

4.png

HTTP2

更快、更稳定、更简单

  • 消息：与逻辑请求或响应消息对应的完整的一系列帧。
  • 数据流：已建立的连接内的双向字节流可以承载一条或多条消息。
  • 交错发送，接收方重组织
  • HTTP/2连接都是永久的，而且仅需要每个来源一个连接
  • 流控制：阻止发送方向接收方发送大量数据的机制
  • 服务器推送

HTTPS

HTTPS : Hypertext Transfer Protocol Secure

  • 经过TSL/SSL加密
  • 对称加密：加密和解密都是使用同一个密钥
  • 非对称加密：加密和解密用不同的密钥
  • 非对称加密，加密和解密需要使用两个不同的密钥：公钥 (public key)和私钥 (private key)

5.png

应用场景分析

1.打开chrome

2.输入网址

3.打开控制台

  • 右键->检查
  • F12

4.切换到network

静态资源

makefile
复制代码
access-control-allow-origin:*
age: 2230335
ali-swift-global-savetime: 1625397577
cache-control: max-age=31536000
content-encoding:br
content-length: 26816
content-md5: Cf/SyvzWui5CSr8cu25TFQ==
content-type: text/css; charset=utf-8
date: Sun，04 Jul 2021 11:19:37 GMT
eagleid:276076a016276279126953122e
last-modified: Sun，04 Ju 2021 11:11:19 GMT
server: Tengine
server-timing: cdn-cache;desc=HIT,edge;dur=1
timing-allow-origin:*
vary: Accept-Encoding

缓存策略：强缓存, Cache-control: 一年

其他信息：允许所有域名访问，资源类型 CSS

静态资源方案

缓存 + CDN + 文件名 flash

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

6.png

登录

跨域解决方案

  • CORS

  • 代理服务器

    • 同源策略是浏览器的安全策略，不是 HTTP的

  • Iframe

    • 诸多不便

鉴权

  • Session + Cookie（常用）

7.png

  • JWT ( JSON web token )

8.png

SSO（单点登录）

9.png

实战

AJAX之XHR

  • XHR: XMLHttpRequest

AJAX之Fetch

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

标准库: HTTP/HTTPS

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

常用的请求库:axios

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

用户体验

网络优化

10.png

稳定性

11.png

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

拓展

WebSocket

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

QUIC

Quick UDP Internet Connection

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

总结

本节课介绍 HTTP 协议及其分析，还有其在实际应用场景的分析，总的来说是一个较大的领域，联系了计算机网络知识，具体的知识和实践需要我们在课后继续学习。

avatar
文章
阅读
粉丝