[前端与HTTP | 青训营笔记05]

mingdu明渡
114 阅读12分钟

前言

这是我参与 [第五届青训营] 伴学笔记创作活动的第 5 天，上回讲到 Typescript, 这回我们讲 HTTP，因为要和浏览器打交道的，请求和响应数据，那什么是HTTP呢，HTTP

什么是HTTP

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

微信截图_20230127220714.png

协议分析-发展

Snipaste_2023-01-27_21-18-58.png

协议分析-报文

Method

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

Method 状态

  1. Safe (安全的): 不会修改服务器的数据的方法 GET HEAD OPTIONS
  2. Idempotent (幂等):
    2.1 同样的请求被执行一次与连续执行多次的效果是一样的，服务器的状态也是一样的.所有safe的方法都是ldempotent 的
    2.2. GET HEAD OPTIONS PUT DELETE

状态码

微信截图_20230127221806.png

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

常用请求头

  • 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头部等

HTTP的状态码304于客户端缓存，它表示客户端有缓存，并且请求的资源没有更改，从而不需要重新加载。服务器会根据客户端请求的，首部字段“If-Modified-Since”、“If-None-Match”或“If-Match来决定是否重新加载资源。如果资源没有更改，则服务器返回状态码304，并且将首部字段ETag和Last-Modified返回给客户端以确保客户端在缓存过期前请求的是最新的版本

常用响应头

  • 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头部 (警如为*)

在我代码生活中Access-Control-Allow-Orgin、Content-type、Cache-Control、Set-Cookie

缓存

强缓存

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

协商缓存

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

强缓存就是如果本地有缓存，就直接使用好了，协商缓存就是如果本地有缓存，它能不能使用？是不是最新的？client 要和 server side进行彼此验证一下，需要有一个通信协商的过程。

缓存的优先级顺序

微信截图_20230131200738.png

对于我们开发人员来说，我们需要关注的是根据业务需要去设置状态，默认状态就是强缓存，特殊状态就是协商缓存；
在开发过程中，特殊状态用的比较的多，加强安全性（可用性，匹配性）和验证是否最新；我们需要去熟练掌握。

cookie

Set-Cookie - response
Name=value各种cookie的名称和值
Expires=DateCookie 的有效期，缺省时Cookie仅在浏览器关闭之前有效。
Path=Path限制指定Cookie 的发送范围的文件目录，默认为当前
Domain=domain限制cookie生效的域名，默认为创建cookie的服务域
secure仅在HTTPS 安全连接时，才可以发送Cookie
HttpOnlyJavaScript 脚本无法获得Cookie
SameSite=[ None | Strict | Lax ]- None 同站、跨站请求都可发送
- Strict 仅在同站发送
- 允许与顶级导航一起发送，并将与第三方网站发起的GET请求一起发送

cookie 借助cookie去验证用户身份信息，重点看下SameSite,SameSite是浏览器帮我们设置的信息，是由key、value这样的键值对的形式去存在的。返回的是键值对，上面一些字段主要还是针对访问控制，浏览器的安全。

HTTP/2

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

HTTP/2 概念

概念1：

  • 帧 (frame):HTTP/2 通信的最小单位每个帧都包含帧头，至少也会标识出当前帧所属的数据流。
  • 二进制

概念2.：

  • 消息:与逻辑请求或响应消息对应的完整的一系列帧。
    数据流:已建立的连接内的双向字节流可以承载一条或多条消息。
  • 交错发送，接收方重组织 5e4f8ddc-63be-40d6-b7ea-6ebc18d1b7ba.png

总结：HTTP/2 通信最小单位帧，是由二进制组成；组成一系列帧的逻辑概念就是消息，储存消息的双向字节流被称为数据流，可交错发送，可根据帧的顺序重新构建。

HTTP/2 特性

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

场景：HTTP/2 基于TCP，TCP需要有间接链接的过程，一个对应的client，我们都要去请求，重新建立链接的话，这个消耗是比较大的；
HTTP/2 就是基于这场景提出了一些特性，我们每一个来源/目标地址，我们建立的链接，我们可以永久利用的，直接使用就好了；这是HTTP/2 的复用性。
HTTP/2 还具有主动性，场景：比如说我们在看vdieo ，video 的数据量是比较大的，我们想在中间某个地方暂停，如果说浏览器能识别你暂停在这个时间点的话，并且主动去拒绝请求资源；这样的流控制的机制。
HTTP/2 更智能，server 有主动推送css,js文件给client 的能力

微信截图_20230131205349.png

总结： HTTP/2 的链接是永久链接，可通过流控制去实现阻止发送请求，HTTP/2 拥有智能推送功能，可以识别css,js文件并推送给client

HTTP/2 加密

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

5a242ae5-e9f2-4c2f-bf34-97a7252b2958.png

总结： HTTP/2 中更安全、更智能、更快，安全：提供了各种字段，HTTP/2 是永久链接，有加密协议；更快：提出强缓存和协商缓存字段，交错发送，接收方重组织；更智能：流控制，服务器推送。

场景分析

通过开发者模式进行调试

  1. 打开chrome
  2. 输入 www.toutiao.com 3.打开控制台
    • 右键->检查
    • F12
  3. 切换到network
  • 静态资源
  • 登陆

场景分析 - 静态资源

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

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

通过alias别名hash 进行操作，将文件资源放到CDN 上，然后通过CDN 进行内容分发

场景分析 - 登录

微信截图_20230201095630.png

Snipaste_2023-02-01_10-05-27.png

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

表单登录的详解

  • 账号密码登录
  • 打开控制台 - network - 勾选 preserve log - 过滤quick_login
  • 观察请求 2fd29568-280d-413f-86d4-005dd00ddaf3.png 为什么有options 请求？
  • 跨域，cross-origin "same-origin" "cross-origin" 微信截图_20230201101247.png 微信截图_20230201101259.png

场景分析 - 跨域

跨域

  • CORS (nCross-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

b4895010-f7b6-4abc-a734-810013a107c2.png

复杂请求会发送预请求 跨域解决方案

  • CORS
  • 代理服务器
    • 同源策略是浏览器的安全策略，不是HTTP的
  • Iframe
    • 诸多不便 bb89e986-3e0f-421b-90e0-2ea045750de6.png

常用webpack 的 devserver 就是做了代理请求

  1. 向什么地址做了什么动作?

    • 使用POST方法
    • 目标域名 https: //sso.toutiao.com
    • 目标path /quick login/v2/

  2. 携带了哪些信息，返回了哪些信息

    • 携带信息
      • Post body，数据格式为form
      • 希望获取的数据格式为json
      • 已有的cookie
    • 返回信息
      • 数据格式json
      • 种cookie的信息 下一次进入页面为什么能记住登陆态呢?
鉴权
  • Session + cookie a12ac280-e4db-4bc0-a936-0944bc9fedfb.png
  • JWT (JSON web token) f7effe43-9cfd-40ec-9d8b-71552d4138c8.png

微信截图_20230201103926.png

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

借助浏览器的cookie server接收到提交的信息请求，如果消息是合法的，那就会生成session 存储起来，response会种到相应的域名和地址上面；下一次浏览器就会携带cookie session 出来，server 跟本地的相比较、解析，正确识别当前用户。
server 会生成token 直接通过response 返回给我们浏览器，下次浏览器就把请求头相应的字段提交给server,然后把token 解析出来，查看token的合法性和是哪个用户的信息，解析做验证再返回给我们本地。
场景：首次注册会发送一个邮件，邮件里面有链接，然后你点击进去不需要登录，就是通过token去携带了通文信息。

SSO
  • SSO： 单点登录 (Single Sign On) 944b290a-a395-4b5b-8cb4-39125b5ddddc.png

运用场景： 当我登录了一次，在子应用和相关的网站进行就不会再次登录；子应用共享，就出现了SSO 单点登录

实战- 浏览器篇

AJAX之XHR

XHR: XMLHttpRequest
- readyState
UNSENT代理被创建，但尚未调用open() 方法。
OPENEDopen()方法已经被调用。
HEADERS_RECEIVEDsend()方法已经被调用并且头部和状态已经可获得。
LOADING下载中 ; responseText 属性已经包含部分数据。
DONE下载操作已完成。

下面是简单的XHR 的封装

function request(option) {
   if (String(option) !== '[object,Object]') return undefined
   option.method = option.method ? option.method.toUpperCase():'GET'
   option.data = option.data || {}
   var formData = []
   for (var key in option.data) {
       formData.push(''.concat(key,'=',option.data[key]))
   }
   option.data = formData.join('&')
   
   if (option.method === 'GET') {
       option.url += location.search.length === 0 ? ''.concat('?',option.data):''.concat('&'.option.data)
   }
   
   var xhr = new XMLHttpRequest()
   xhr.responseType = option.responseType || 'json'
   xhr.onreadstatechange = function () {
       if (xhr.readyState === 4) {
           if (xhr.status === 200) {
              if (option.success && typeof option.success === 'function') {
              option.success(xhr.response)
              }
           } else {
            if (option.error && typeof option.error === 'function') {
               option.error()
            }
           }
       }
   }
   
   xhr.open(option.method,option.url,true)
   if (option.method === 'POST') {
       xhr.setRequestHeader('Content-Type','application/x-www-from-urlencoded')
   }
   xhr.send(option.method === 'POST' ? option.data : null)
}

AJAX之Fetch

  • XMLHttpRequet的升级版使用
  • Promise
  • 模块化设计，Response.Request，Header对象
  • 通过数据流处理对象，支持分块读取
postData('http://example.com/answer',{ answer: 42 })
  .then(data => console.log(data)) // JSON from response.json() call
  .catch(error => console.error(error))

function postData(url, data) {
  // Default options are marked with *
  return fetch(url, {
    body: JSON.stringify(data), // must match 'Content-Type' header
    cache: 'no-cache',// *default， no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin', // include, same-origin, *omit.
    headers: {
      'user-agent': 'Mozilla/4.0 MDN Example',
      'content-type': 'application/json'
    },
    method: 'POST',// *GET， POST，PUT，DELETE， etc.
    mode: 'cors',// no-cors， cors，*same-origin
    redirect: 'follow', // manual， *follow, error
    referrer: 'no-referrer', // *client， no-referrer
  })
    .then(response => response.json()) // parses response to JSON
}

实战 - node篇

标准库： HTTP/HTTPS

  • 默认模块，无需安装其他依赖
  • 功能有效/不是十分友好
const https = require('https');
https.get('https://test.com?api_key=DEMO_KEY' ,(resp) => {
  let data = '';

  // A'chunk of data has been recieved
  resp.on('data', (chunk) => {
    data += chunk;
  });

  // The whole response has been received. Print out the result.
  resp.on('end', () => {
    console.log(JSON.parse(data).explanation);
  });

}).on("error", (err) => {
  console.log("Error: " + err.message);
});

常用的请求库: 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'))
});

工作中的最常用的还是使用 axios 库

实战 - 用户体验

网络优化 de4713f3-0202-4f60-a241-ab72db1b8b9b.png

  • CDN 是否开启H2 的性能对比数据参考 |Testing Site|Location|H2|Http 1.1| |--|--|--|--| |GTMetrix|Dallas|0.9s|1.5s| |Pingdom tools**|Dallas|1.6s|1.65s| |GTMetrix|London|1.9s|2.2s|

  • 预解析、预连接

<link rel="dns-prefetch" href="//example.com">
<link rel="precontent" href="//cdn.example.com" crossrigin>

稳定性 db79b940-eeab-4b19-bf6d-8e42c406d867.png

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

了解更多

WebSocket | QUIC

扩展 - 通信方式

WebSocket

  • 浏览器与服务器进行全双工通讯的网络技 术
  • 典型场景: 实时性要求高，例如聊天室
  • URL 使用 ws:// 或 wss:// 等开头 801b9b22-f75b-4a3b-a5cb-aec43690285b.png QUIC QUIC: Quick UDP Internet Connection
  • 0-RTT 建联 (首次建联除外)
  • 类似TCP的可靠传输。
  • 类似TLS的加密传输，支持完美前向安全用户空间的拥塞控制，最新的BBR算法
  • 支持h2的基于流的多路复用，但没有TCP的HOL问题
  • 前向纠错FEC
  • 类似MPTCP的Connection migration。

6d78f131-a267-40cf-9be1-9eb38cbfb662.png fecdd4f1-5105-47a6-ac99-97bd29a277dc.png

总结： 网络请求库就使用axios,实行性要求比较高的话，就使用webSocket 全双工通信网络技术，正常通信方式推荐QUIC 封装UDP的网络技术

avatar
文章
阅读
粉丝