滴！你的HTTP实用指南到了！ | 青训营笔记

Canivores
84 阅读7分钟

滴！你的HTTP实用指南到了！ | 青训营笔记

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

今天这部分知识对于前端入门人员来说是非常必要，梦回计网，又更加深入和切合实际，接下来将从以下5个方面简述HTTP协议，坐好扶稳喽

  1. 什么是HTTP协议
  2. HTTP协议分析——基本结构与发展历程
  3. 常见场景中的HTTP协议应用
  4. 在不同的环境中发起HTTP请求
  5. 知识扩展，了解更多网络通信协议

一、初识

当我们在网上冲浪时，从在浏览器输入栏输入url地址，到看到渲染好的网页，这其中到底发生了什么？

image.png

从这张图我们可以大概了解整个过程，如果想要搞懂这个过程，建议阅读这篇文章。这其中的数据传输，HTTP就发挥了重要作用。

什么是HTTP

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

二、协议分析

image.png

报文分析

image.png

1. 请求方法method

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

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

    GET HEAD OPTIONS

  • ldempotent(幂等)：同样的请求被执行一次与连续执行多次的效果是一样的，服务器的状态也是一样的，所有safe的方法都是ldempotent的

    GET HEAD OPTIONS PUT DELETE

2. 状态码（常见）

image.png
分类分类描述
1**信息，服务器收到请求，需要请求者继续执行操作
2**成功，操作被成功接收并处理
3**重定向，需要进一步的操作以完成请求
4**客户端错误，请求包含语法错误或无法完成请求
5**服务器错误，服务器在处理请求的过程中发生了错误
  • 200 OK - 客户端请求成功
  • 301 - 资源（网页等）被永久转移到其他URL
  • 302 - 临时跳转
  • 401 Unauthorized - 请求未经授权
  • 404 - 请求资源不存在，可能是输入了错误的URL
  • 500 - 服务器内部发生了不可预期的错误
  • 504 Gateway TimeOut - 网关或者代理的服务器无法在规定的时间内获得想要的响应

3. RESTful API

RESTful API：一种API设计风格

REST - Representational State Transfer 表现层状态转化

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

image.png

4. 常用请求头

image.png

5. 常用响应头

image.png

6. 缓存

image.png 缓存使用流程：

image.png

7. cookie

Set-Cookie - response

image.png

发展

HTTP/2

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

  • 帧(frame) ：HTTP/2通信的最小单位，每个帧都包含帧头，至少也会标识出当前帧所属的数据流。
  • 消息：与逻辑请求或响应消息对应的完整的一系列帧。
  • 数据流：已建立的连接内的双向字节流，可以承载一条或多条消息。

image.png

特征：

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

HTTPS

HTTPS : Hypertext Transfer Protocol Secure 超文本传输安全协议

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

image.png

HTTP协议和HTTPS协议对比

image.png

三、常见场景

头条网络分析：

1、打开chrome

2、输入toutiao.com

3、打开控制台 右键检查 或者 F12

4、切换到网络network

image.png

1. 静态资源

image.png

提问：状态码200，一定发起了请求吗？

看那个括号了嘛？(from disk cache)——来自硬盘缓存

请求响应标头分析：

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

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

image.png

2. 登录

头条登录

1、点击登录

2、使用表单登录

3、打开控制台 - 选择网络network - 勾选保留日志preserve log - 过滤 quick_login

4、观察请求

image.png

分别点开这两个请求看一下，可以发现两个请求除了请求方法不同，其余都相同

image.png

image.png

提问：为什么会存在options的请求？

我们可以看到请求网址是https://sso.toutiao.com/quick_login/v2/?aid=24&account_sdk_source=sso&language=zh，还记得我们是在www.toutiao.com页面进行登录的嘛，实际上这里就会存在一个跨域的问题，导致这里会出现options的请求。

那么，啥是跨域？

image.png

如果scheme、hostname和port中有一个不相同，就会出现跨域问题。

image.png

那么跨域有什么解决措施呢？

  • CORS

  • 代理服务器

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

  • lframe

    • 诸多不便

具体方法这里就不详细说了，想深入了解的朋友可以看一下这篇文章10种跨域解决方案（附终极大招） - 掘金 (juejin.cn)

image.png

向什么地址做了什么动作？

image.png

  • 使用POST方法
  • 目标域名 https://sso.toutiao.com
  • 目标地址 quick_login/v2/

携带和返回了哪些信息？

  • 携带信息

    • Post body，数据格式为form
    • 希望获取的数据格式为json
    • 已有的cookie

  • 返回信息

    • 数据格式json
    • cookie的信息

为什么下一次进入页面能记住登录态呢？

鉴权：

  • session + cookie
image.png
  • jwt（JSON web token）
image.png

点击右上角的发文章，跳转后的网站为什么能自动登录？

  • SSO：单点登录（Single Sign On）

想深入了解的朋友可以看一下这篇文章单点登录(SSO)看这一篇就够了！❤️这次不慌了 - 掘金 (juejin.cn)

四、实际应用（浏览器/node.js）

AJAX之XHR

  • XHR：XMLHttpRequest
  • readyState
状态名称描述
0UNSENT代理被创建，但尚未调用open()方法
1OPENEDopen()方法已经被调用
2HEADERS_RECEIVEDsend()方法已经被调用，并且头部和状态已经可获得
3LOADING下载中；response Text属性已经包含数据
4DONE下载操作已完成

AJAX之Fetch

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

Node

标准库：HTTP / HTTPS

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

axios

常用的请求库：axios

起步 | Axios 中文文档

  • 支持浏览器、nodejs环境
  • 丰富的拦截器
 //全局配置
 axios.defaults.baseURL = "https://api.example.com";
 //添加请求拦截器
 axios.interceptors.request.use(function (config) {
     //在发送请求之前做些什么
     return config;
 }，function (error) {
     //对请求错误做些什么
     return Promise.reject(error );
 });
 
 //发送请求
 axios( { 
     method: 'get',
     url: 'http://test.com',
     responseType: 'stream
     }).then( function(response) {
     response.data.pipe( fs.createWriteStream('ada_lovelace.jpg'))
 });

用户体验

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

五、了解更多

WebSocket

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

QUIC

QUIC：Quick UDP Internet Connection 基于UDP

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

参考博客：

链接：juejin.cn/post/712712…，作者：小奥z

链接：juejin.cn/post/712712…，作者：北冥_有鱼

avatar
文章
阅读
粉丝