HTTP 实用指南 | 青训营笔记

北冥_有鱼
177 阅读11分钟

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

HTTP 实用指南

1.初识

什么是HTTP?

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

2.协议分析

001.png

报文

Method

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

状态码

分类分类描述
1**信息，服务器收到请求，需要请求者继续执行操作
2**成功，操作被成功接收并处理
3**重定向，需要进一步的操作以完成请求
4**客户端错误，请求包含语法错误或无法完成请求
5**服务器错误，服务器在处理请求的过程中发生了错误
状态码状态码英文名称中文描述
100Continue继续。客户端应继续其请求
101Switching Protocols切换协议。服务器根据客户端的请求切换协议。只能切换到更高级的协议，例如，切换到HTTP的新版本协议
200OK请求成功。一般用于GET与POST请求
201Created已创建。成功请求并创建了新的资源
202Accepted已接受。已经接受请求，但未处理完成
203Non-Authoritative Information非授权信息。请求成功。但返回的meta信息不在原始的服务器，而是一个副本
204No Content无内容。服务器成功处理，但未返回内容。在未更新网页的情况下，可确保浏览器继续显示当前文档
205Reset Content重置内容。服务器处理成功，用户终端（例如：浏览器）应重置文档视图。可通过此返回码清除浏览器的表单域
206Partial Content部分内容。服务器成功处理了部分GET请求
300Multiple Choices多种选择。请求的资源可包括多个位置，相应可返回一个资源特征与地址的列表用于用户终端（例如：浏览器）选择
301Moved Permanently永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替
302Found临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI
303See Other查看其它地址。与301类似。使用GET和POST请求查看
304Not Modified未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源
305Use Proxy使用代理。所请求的资源必须通过代理访问
306Unused已经被废弃的HTTP状态码
307Temporary Redirect临时重定向。与302类似。使用GET请求重定向
400Bad Request客户端请求的语法错误，服务器无法理解
401Unauthorized请求要求用户的身份认证
402Payment Required保留，将来使用
403Forbidden服务器理解请求客户端的请求，但是拒绝执行此请求
404Not Found服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面
405Method Not Allowed客户端请求中的方法被禁止
406Not Acceptable服务器无法根据客户端请求的内容特性完成请求
407Proxy Authentication Required请求要求代理的身份认证，与401类似，但请求者应当使用代理进行授权
408Request Time-out服务器等待客户端发送的请求时间过长，超时
409Conflict服务器完成客户端的 PUT 请求时可能返回此代码，服务器处理请求时发生了冲突
410Gone客户端请求的资源已经不存在。410不同于404，如果资源以前有现在被永久删除了可使用410代码，网站设计人员可通过301代码指定资源的新位置
411Length Required服务器无法处理客户端发送的不带Content-Length的请求信息
412Precondition Failed客户端请求信息的先决条件错误
413Request Entity Too Large由于请求的实体过大，服务器无法处理，因此拒绝请求。为防止客户端的连续请求，服务器可能会关闭连接。如果只是服务器暂时无法处理，则会包含一个Retry-After的响应信息
414Request-URI Too Large请求的URI过长（URI通常为网址），服务器无法处理
415Unsupported Media Type服务器无法处理请求附带的媒体格式
416Requested range not satisfiable客户端请求的范围无效
417Expectation Failed服务器无法满足Expect的请求头信息
500Internal Server Error服务器内部错误，无法完成请求
501Not Implemented服务器不支持请求的功能，无法完成请求
502Bad Gateway作为网关或者代理工作的服务器尝试执行请求时，从远程服务器接收到了一个无效的响应
503Service Unavailable由于超载或系统维护，服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的Retry-After头信息中
504Gateway Time-out充当网关或代理的服务器，未及时从远端服务器获取请求
505HTTP Version not supported服务器不支持请求的HTTP协议的版本，无法完成处理

RESTful API

RESTful APl : 一种API设计风格; REST - Representational state Transfer

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

常用请求头

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

缓存

002.png

强缓存

  • Expires，时间戳

  • Cache-Control

    • 可缓存性

      • no-cache :协商缓存验证
      • no-store :不使用任何缓存

    • 到期

      • max-age :单位是秒,存储的最大周期，相对于请求的时间

    • 重新验证*重新加载

      • must-revalidate : 一旦资源过期,在成功向原始服务器验证之前,不能使用
协商缓存
  • Etag/lf-None-Match :资源的特定版本的标识符，类似于指纹
  • Last-Modified/lf-Modified-Since :最后修改时间

cookie

Set-Cookie - response

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

发展

HTTP/2概述

更快、更稳定、更简单

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

消息：与逻辑请求或响应消息对应的完整的一系列帧。

数据流：已建立的连接内的双向字节流，可以承载一条或多条消息。

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

HTTPS概述

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

3.常见场景

静态资源

004.png

005.png

003.png

缓存策略是怎样的?

  • 强缓存（max-age=xxxxx）
  • Cache-control : 一年

还有什么信息吗?

  • 允许所有域名访问（access-control-allow-origin）
  • 资源类型:css （content-type）

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

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

006.png

登陆

007.png

  • 业务场景

    • 表单登录
    • 码登录

  • 技术方式

    • sso

008.png

跨域问题，导致了请求方法为OPTION

协议、主机名、端口任意一者不同都会出现跨域问题（HTTP的默认端口号443）

009.png

跨域解决方案

  • CORS

  • 代理服务器

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

  • lframe

    • 诸多不便

010.png

SSO：单点登录（Single Sign On）

011.png

4.实际应用

浏览器/node.js

AJAX之XHR

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

AJAX之Fetch

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

node中标准库: HTTP/HTTPS

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

常用库

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

用户体验

网络优化

012.png

稳定性

013.png

5.了解更多

WebSocket

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

QUIC

QUIC：Quick UDP Internet Connection 基于UDP

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