day5 HTTP使用指南 | 青训营笔记

草莓味的海绵宝宝
117 阅读5分钟

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

一、初识HTTP

image-20230127190544621.png

什么是http

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

二、协议分析

发展历程

image-20230127190834787.png

协议分析-报文

Method

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

请求特点

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

状态码

1xx指示情息,表示请求已接收重读处理
2xx成功,表示请求已被或功接收、理解、接受
3xx重定向,要完成请求必须进行更进一步的操作
4xx客户端错误,请求有语法错误或请求无法实现
5xx服务器端错误,服务器末能实现合法的请求
  • 200OK-客户端请求成功
  • 301-资源(网页等)被永久转移到其它URL
  • 302 -临时跳转
  • 401 Unauthorized -请求未经授权
  • 404-请求资源不存在，可能是输入了错误的URL
  • 500-服务器内部发生了不可预期的错误
  • 504 Gateway Timeout-网关或者代理的服务器无法在规定的时间内获得想要的响应。

RESTful API 一种API设计风格

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

image-20230127193157152.png

常用请求头

image-20230127193231722.png

常用响应头

image-20230127193341333.png

缓存

image-20230127193539346.png 在使用缓存会有优先级之分

image-20230127193852791.png

cookie Set-Cookie-response

image-20230127194038119.png

协议分析-发展

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

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

特点

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

https概述

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

三、场景分析-静态资源

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

image-20230127211311146.png 静态资源方案：缓存+CDN+文件名hash

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

CDN原理图

image-20230127211525922.png

业务场景

  • 表单登录
  • 扫码登陆

技术方式

  • SSO

打开今日头条登录

image-20230127211920096.png

分析两个请求 image-20230127211953301.png

image-20230127212810519.png

  • Session+cookie

  • JWT（JSON web token）：放在请求头

image-20230127213007481.png

  • SSO：单点登录

    • 登录信息共享

跨域

image-20230127212125067.png

  • CORS ( Cross-Origin Resource Sharing )

  • 预请求:获知服务端是否允许该跨源请求(复杂请求)

  • 相关协议头

    • Access-ControlAllow-0rigin
    • Access-Control-Expose-Headers
    • Access-Contro-Max-Age
    • Access-ControHAllow-Credentials
    • Access-Control-Allow-Methods
    • Access-ControHAllow-Headers
    • Access-ControlRequest-Method
    • Access-Control-Request-Headers
    • Origin

跨域解决方案

  • CORS

  • 代理服务器（应用较多，在webpack的插件解决调试等问题

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

  • Iframe

    • 诸多不便

四、实战

浏览器篇

image-20230127213256461.png

AJAX之Fetch

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

image-20230127213449431.png

node篇

标准库：HTTP/HTTPS

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

image-20230127213636335.png

常用的请求库：axios

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

image-20230127213804719.png

用户体验

网络优化

image-20230127213846540.png

稳定性

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

image-20230127213959822.png

五、了解更多

扩展-通信方式

Websocket

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

QUIC：HTTP3常用部分还在研究阶段

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