HTTP实用指南 | 青训营笔记

用户4229857870240
51 阅读5分钟

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

1.初识

背景知识，什么是HTTP，其基本特点

初识HTTP

什么是HTTP

  • Hyper Text Transfer Protocol超文本传输协议
  • 应用层协议，基于TCP协议
  • 请求响应
  • 简单可扩展(可以自定义头部)
  • 无状态(每个请求都是孤立的)

2.协议分析

发展历程

image.png

报文结构

Method image.png

状态码

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

常用请求头

image.png image.png

缓存

强缓存

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

弱缓存

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

image.png

cookie

image.png

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

HTTP/2协议没有改动HTTP原来的应用层语义。之前熟悉的请求方法、状态码、URI、http headers等概念还是一模一样的。但HTTP/2修改了数据包的格式以及数据在客户端与服务端之间传递的方式。所以只要服务端和客户端（浏览器）支持，应用不需要经过任何修改就可以切换到新协议下运行。

新的二进制分帧层是HTTP/2性能增强的核心，他定义了消息的封装格式与传输方式。 为了说明这个传输的过程，我们需要先理解3个概念

数据流(Stream)：数据流定义了在一条TCP连接内的逻辑上的双向数据流，在一个数据流上可以承载一条或多条消息。一个TCP连接上可以承载很多数量的双向数据流。

消息：与HTTP请求或响应消息对应的一系列帧，这个和传统的request/response是对应的。

帧（frame)：HTTP/2通信的最小单位，每个帧都包含帧头，帧上会标明自己所属的数据流。来自不同数据流的帧可以交错发送。在HTTP/2中定义了很多种类的帧，最主要的有HEADER帧与DATA帧，对应了原来的http header和body。

简单的说，HTTP/2协议将HTTP/1.x中使用文本方式传递的请求与响应消息分解成为了二进制编码的帧的传递。所有这些帧能够复用一个TCP连接，通过任意数量的逻辑数据流进行传输。这也是HTTP/2协议性能与功能改进的基础。

HTTPS概述

经过TSL/SSL加密，安全性提高

浏览器与服务器端加密方式不同

  • 对称加密：加密和解密都是使用同一个密钥
  • 非对称加密，加密和解密需要使用两个不同的密钥：公钥（public key） 和私钥（private key）

image.png

在HTTPS中，为了安全性更高，使用了对称加密和非对称加密混用的方式

3.常见场景

静态资源

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

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

用了缓存后用户可以优先从本地缓存读取文件，执行结果一定是比较快的，但第一次打开网页时本地没有缓存，一般把静态资源放到CDN上

在快的同时还要保证用户拿到最新的结果，通过修改文件名的方法，在打包的时候做一些版本号或者内容hash

跨域

大部分情况下先发送域请求，知晓服务端Server是否允许本次跨域资源

  • 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

鉴权

HTTP请求为无状态请求，但是登陆之后刷新页面仍然会保持登陆状态，这里涉及到一个鉴权的方案。大部分的门户网站都Session+Cookie的方案。登陆成功后会发起请求将身份信息提交给Server,Server收到后会处理验证正确性，正确的话会生成一个Session并保存，同时在请求的Response里，Server会把Session借由Set Cookie种到相应域名和地址下，下次再访问时浏览器自动携带Cookie的策略会把Session携带出来，解析之后正确识别出当前登录用户

还有一种方案为借助Web token 提交之后会生成一个token，按一定格式在Response返回浏览器，浏览器放在请求头的字段里提交给Server，Server会把token解析出来看是否有效，携带的是哪个用户的信息解析做验证再返回

4.实际应用

如何发起HTTP协议

AJAX之XHR

AJAX之Fetch XMLHttpRequet的升级版

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

标准库：HTTP/HTTPS

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

常⽤的请求库：axios

  • 支持浏览器、nodejs环境
  • 丰富的拦截器
avatar
文章
阅读
粉丝