HTTP 实用指南 | 青训营笔记

Close
78 阅读6分钟

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

初识HTTP

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

协议分析

报文分析

image.png

Method

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

Method的一些特点：

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

eg：GET HEAD OPTIONS

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

状态码

image.png

RESTful API

RESTful API :一种API设计风格;

REST：Representational State Transfer

  1. 每一个URI代表一种资源;
  2. 客户端和服务器之间，传递这种资源的某种表现层﹔
  3. 客户端通过HTTP method，对服务器端资源进行操作，实现"表现层状态转化"。
请求返回码含义
GET/zoos200 OK列出所有动物园，服务器成功返回了
POST/zoos201 CREATED新建一个动物园，服务器创建成功
PUT/zoos/ID400 INVALID REQUEST更新某个指定动物园的信息(提供该动物园的全部信息) 用户发出的请求有错误,服务器没有进行新建或修改数据的操作
DELETE/zoos/ID204 NO CONTENT删除某个动物园，删除数据成功

常用请求头

Accept接收类型，表示浏览器支持的MIME类型(对标服务端返回的Content-Type)
Content-Type客户端发送出去实体内容的类型
Cache-Control指定请求和响应遵循的缓存机制，如no-cache
lf-Modified-Since对应服务端的Last-Modified，用来匹配看文件是否变动，只能精确到1s之内
Expires缓存控制,在这个时间内不会请求，直接使用缓存,服务端时间
Max-age代表资源在本地缓存多少秒,有效时间内不会请求,而是使用缓存
lf-None-Match对应服务端的ETag，用来匹配文件内容是否改变（非常精确)
Cookie有cookie并且同域访问时会自动带上
Referer该页面的来源URL(适用于所有类型的请求，会精确到详细页面地址, csrf拦截常用到这个字段)
Origin最初的请求是从哪里发起的(只会精确到端口）,Origin比Referer更尊重隐私
User-Agent用户客户端的一些必要信息，如UA头部等

常用响应头

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头部（譬如为*)

缓存

image.png

image.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/Lax1.None同站、跨站请求都可发送 2.Strict仅在同站发送 3.允许与顶级导航一起发送,并将与第三方网站发起的GET请求一起发送未经授权严禁录制

持续发展

image.png

HTTP/2

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

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

image.png

  • 消息:与逻辑请求或响应消息对应的完整的一系列帧
  • 数据流:已建立的连接内的双向字节流,可以承载一条或多条消息
  • 交错发送,接收方重组织

image.png

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

image.png

HTTPS

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

image.png

场景分析

静态资源

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

CDN : Content Delivery Network

通过用户就近性和服务器负载的判断,CDN确保内容以—种极为高效的方式为用户的请求提供服务。

image.png

跨域

image.png

解决跨域的方法：

1. 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

image.png

代理服务器

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

image.png

Iframe

诸多不便

发起请求

浏览器

AJAX之XHR

XHR:XMLHttpRequest

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

image.png

AJAX之Fetch

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

image.png

node

标准库:HTTP/HTTPS

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

image.png

常用的请求库:axios

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

image.png

用户体验

网络优化

image.png

image.png

稳定性

image.png

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

了解更多

不止HTTP协议这一个选择

WebSocket

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

image.png

QUIC

image.png

avatar
文章
阅读
粉丝