HTTP使用指南 | 青训营笔记

TA_WORDL
114 阅读5分钟

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

初识

背景知识

image.png 当输入url到页面展示经过了几步：

  1. 查找url对应服务器的IP地址
  2. 浏览器根据这个ip以及相应的端口号，构造一个http请求，这个请求封装在一个tcp包中
  3. 服务器响应并返回HTML等文件数据
  4. 浏览器构造DOM树并渲染页面

什么是HTTP：

  • HTTP（Hyper Text Transfer Protocol），即超文本传输协议

  • 是应用层的协议，是一个用于传输超文本数据的一个协议

  • 超文本指的是文本，还有图片、视频等等

  • 一般来说，它运行在TCP协议之上并基于TCP协议，具有简单可扩展、无状态（没有记忆能力，所有请求都是独立的）的特点。

协议分析

发展历程

image.png

Method

image.png

  • safe(安全的)：我们认为不会修改服务器的数据的方法是安全的（比如GET HEAD OPTION)
  • Idempotent(幂等)：同样的请求被执行一次与连续执行多次的效果是一样的，服务器的状态也是一样的，所有safe的方法都是Idempotent

状态码

image.png

RESTful API 一种API设计风格

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

image.png

问题讨论(个人观点，错误可反驳）：

如果服务端接收到调用，但是发现有错误，该怎么返回?

我认为应该返回2xx，并告知错误原因；如果请求的是页面文件，则进行重定向

我们传输的参数类型错误导致解析失败，是返回5xx还是200比较好呢？

个人认为是5xx

常用请求头

image.png

常用响应头

image.png

缓存

image.png must-revalidate，配合max-age使用。一个场景是客户端和服务端断开连接后，如果must-revalidate则不能用缓存

image.png

cookie

image.png

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

帧：HTTP/2通信的最小单位，每个帧都包含帧头，至少也会标识出当前帧所属的数据流

消息：与逻辑请求或响应信息对应的完整的一系列帧

数据流：已建立的连接内的双向字节流，可以承载一条或多条信息 控制流：阻止发送方向接收方发送大量数据的机制（比如，暂停视频，那么视频数据的发送就会暂停）

  • 使用二进制传输，效率高
  • 交叉发送，接收方重组织
  • HTTP/2连接都是永久的，而且仅需要每个来源一个连接
  • 服务器推送： 举例解析：当客户端请求html文件，那么服务端会将对用的js和css文件推动给客户端 image.png

HTTPS

  • 经过TSL/SSL加密
  • 对称加密：加密和解密都是使用同一密钥
  • 非对称加密：加密和解密需要使用两种不同的密钥：公钥和私钥

image.png

常见场景

静态资源

image.png 我们可以通过from disk cache可知，实际上并没有发起请求，数据是从缓存中获取的

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

CDN：通过用户就近性和服务负载的判断，CDN确保内容以一种极为高效的方式为用户的请求提供服务；距离较近，传输距离小，那么响应的速度就会较快

image.png

登录

业务场景：

  • 表单登录
  • 扫码登录

技术方案：SSO

我们登录今日头条，查看对应的接口： image.png 我们查看第一个请求，发现method为OPTIONS，那么为什么又OPTIONS的请求？

请求的URL与头条的URL不符合，那么就牵扯到跨域问题了

options请求就是预检请求，可用于检测服务器允许的http方法。当发起跨域请求时，由于安全原因，触发一定条件时浏览器会在正式请求之前自动先发起OPTIONS请求，即CORS预检请求，服务器若接受该跨域请求，浏览器才继续发起正式请求。

跨域

协议，域名，端口有一处不同就会出现跨域问题 image.png

处理跨域问题：

  • CORS

    预请求：获取服务端是否允许该跨域请求

    相关协议头：

    • Access-Control-Allow-Orign

    • 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

    • Orign

    image.png

  • 代理服务器

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

    image.png

记住登录状态

image.png 适合使用jwt的场景：

  • 有效期短
  • 只希望被使用一次

比如，用户注册后发一封邮件让其激活账户，通常邮件中需要有一个链接，这个链接需要具备以下的特性：能够标识用户，该链接具有时效性（通常只允许几小时之内激活），不能被篡改以激活其他可能的账户，一次性的。这种场景就适合使用jwt。

而由于jwt具有一次性的特性。单点登录和会话管理非常不适合用jwt，如果在服务端部署额外的逻辑存储jwt的状态，那还不如使用session。基于session有很多成熟的框架可以开箱即用，但是用jwt还要自己实现逻辑。

实际应用

AJAX之Fetch

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

用户体验

image.png 稳定性

image.png

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

了解更多

WebSocket

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

QUIC（Quick UDP Internet COnnection）

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