HTTP协议知识点总结

前端

前言

这篇文章主要是我平时在学习HTTP过程中看到的一些知识点，现在把他们总结成一篇文章，建立一个自己的知识体系，全是干货。另外，推荐一本非常棒的HTTP书——《图解HTTP》，这本书图文并茂，挺有趣的。

HTTP是基于TCP/IP协议的应用层协议，用于客户端和服务器之间的通信，默认80端口。我们按照他的发展历程的时间顺序开始说。

1. HTTP/0.9

1990年提出的，是最早期的版本，只有一个命令GET。

2. HTTP/1.0

1996年5月提出的。

  • 缺点：每个TCP连接只能发送一个请求。
  • 解决方法：Connection：keep-alive

3. HTTP/1.1

1997年1月提出，现在使用最广泛的。

3.1 特性

  1. 长连接：TCP连接默认不关闭，可以被多个请求复用。对于同一个域名，大多数浏览器允许同时建立6个持久连接。默认开启Connection：keep-alive。

  2. 管道机制：在同一个TCP连接里，可以同时发送多个请求。但是服务器还是要按照请求的顺序进行响应，会造成“队头阻塞”。

3.2 HTTP首部

HTTP首部分为请求报文和响应报文。它们的格式如下所示：

  • 请求报文：

    Alt text

  • 响应报文：

    Alt text

其中首部字段又分为很多种，我们先看通用首部字段，这是请求报文和响应报文种都会使用的首部。

3.2.1 通用首部字段

1、Cache-Control：操作缓存的工作机制

参数：

  • public：明确表明其他用户也可以利用缓存
  • private：缓存只给特定的用户
  • no-cache：客户端发送这个指令，表示客户端不接收缓存过的响应，必须到服务器取；服务器返回这个指令，指缓存服务器不能对资源进行缓存。其实是不缓存过期资源，要向服务器进行有效期确认后再处理资源。
  • no-store：指不进行缓存
  • max-age：缓存的有效时间（相对时间）

2、Connection：

  • Connection：keep-Alive (持久连接)
  • Connection：不再转发的首部字段名

3、Date：表明创建http报文的日期和时间

4、Pragma：兼容http1.0，与Cache-Control：no-cache含义一样。但只用在客户端发送的请求中，告诉所有的中间服务器不返回缓存。形式唯一：Pragma：no-cache

5、Trailer：会事先说明在报文主体后记录了哪些首部字段，该首部字段可以应用在http1.1版本分块传输编码中。

6、Transfer-Encoding：chunked （分块传输编码）,
规定传输报文主体时采用的编码方式，http1.1的传输编码方式只对分块传输编码有效

7、Upgrade：升级一个成其他的协议，需要额外指定Connection：Upgrade。服务器可用101状态码作为相应返回。

8、Via：追踪客户端和服务器之间的请求和响应报文的传输路径。可以避免请求回环发生，所以在经过代理时必须要附加这个字段。

3.2.2 请求首部字段

1、Accept：通知服务器，用户代理能够处理的媒体类型及媒体类型的相对优先级
q表示优先级的权重值，默认为q = 1.0，范围是0~1（可精确到小数点后3位，1为最大值）
当服务器提供多种内容时，会先返回权重值最高的媒体类型

2、Accept-Charset：支持的字符集及字符集的相对优先顺序，跟Accept一样，用q来表示相对优先级。这个字段应用于内容协商机制的服务器驱动协商。

3、Accept-Encoding：支持的内容编码及内容编码的优先级顺序，q表示相对优先级。
内容编码：gzip、compress、deflate、identity（不执行压缩或者不会变化的默认编码格式）。
可以使用*作为通配符，指定任意的编码格式。

4、Accept-Language：能够处理的自然语言集，以及相对优先级。

3.3 状态码

101 协议升级，主要用于升级到websocket，也可以用于http2

200 OK

204 No content，服务器成功处理请求，但是返回的响应报文中不含实体的主体部分

206 Partial Content，表示客户端像服务器进行了范围请求（Content-Range字段），服务器成功返回指定范围的实体内容

301 永久性重定向，表示请求的资源已经被分配了新的url，旧地址以后都不能再访问了，服务器会返回location字段，包含的是新的地址。

302 临时性重定向，表示请求的资源临时移动到一个新地址

注意：尽量使用301跳转，因为302会造成网址劫持，可能被搜索引擎判为可疑转向，甚至认为是作弊。

原因：从网站A（网站比较烂）上做了一个302跳转到网站B（搜索排名很靠前），这时候有时搜索引擎会使用网站B的内容，但却收录了网站A的地址，这样在不知不觉间，网站B在为网站A作贡献，网站A的排名就靠前了。

303 See Other，与302功能相同，但是它明确规定客户端应采用GET方法获取资源

304 未修改，协商缓存中返回的状态码

307 临时重定向，与302功能相同，但规定不能从POST变成GET

当301、302、303响应状态码返回时，几乎所有浏览器都会把post改成get，并删除请求报文内的主体，之后请求会自动再次发送。然而301、302标准是禁止将post方法改变成get方法的，但实际使用时大家都会这么做。所以需要307。

400 Bad Request，表示请求报文中存在语法错误。当错误发生时，需要修改请求的内容再次发送请求

401 unauthorized，表示发送的请求需要有通过HTTP认证（BASIC认证、DIGEST认证）的认证信息。如果之前已经进行过一次请求，表示用户认证失败。

403 禁止，表示拒绝对请求资源的访问

404 Not Found，表明服务器上无法找到请求的资源

500 Internet Server Error，该状态码表示服务器在执行请求时发生了错误

500 Service Unavailable，表示服务器暂时处于超负荷或者处于停机维护状态，现在无法处理请求

4. SPDY协议

2009年谷歌提出。

  • SPDY结构：

    Alt text
  • 新增特性：

    （1）多路复用：通过一个TCP连接，可以无限制处理多个HTTP请求。

    （2）赋予请求优先级：给请求逐个分配优先级顺序。可以解决在发送多个请求时，因带宽低而导致响应变慢的问题。

    （3）压缩HTTP首部：压缩方式：DELEFT

    （4）推送功能

    （5）服务器提示功能：服务器可以主动提示客户端请求所需的资源。
  • 缺点：

    SPDY强制使用https。而且SPDY基本上只是将单个域名下的通信多路复用，所以当一个web网站上使用多个域名下的资源时，改善效果就会受到限制。

5. WebSocket

html5新提出来的，是web浏览器与web服务器之间的全双工通信标准。主要是为了解决ajax和comet里的xmlhttprequest附带的缺陷所引起的问题。

5.1 特性

（1）推送功能：服务器可直接发送数据，不需要等待客户端的请求；

（2）基于TCP传输协议，并复用HTTP的握手通道；

（3）支持双向通信，用于实时传输消息；

（4）更好的二进制支持；

（5）更灵活，更高效。

5.2 建立连接过程

1、客户端：发起协议升级请求

1
2
3
4
5
6
7
8
GET / HTTP/1.1      `采用HTTP报文格式，只支持get请求`
Host: localhost:8080    
Origin: http://127.0.0.1:3000 
Connection: Upgrade   `表示要升级协议`
Upgrade: websocket    `表示升级到websocket协议`
Sec-WebSocket-Version: 13    `表示websocket 的版本`
Sec-WebSocket-Key: w4v7O6xFTi36lq3RNcgctw==   `是一个 Base64 encode 的值，是浏览器随机生成的`
Sec-WebSocket-Protocol：chat, superchat  `用来指定一个特定的子协议，一旦这个字段有设置，那么服务器需要在建立连接的响应头中包含同样的字段，内容就是选择的子协议之一。`

2、服务端：响应协议升级

1
2
3
4
5
HTTP/1.1 101 Switching Protocols    `101表示协议切换==`
Connection:Upgrade
Upgrade: websocket
Sec-WebSocket-Accept: Oy4NRAQ13jhfONC7bP8dTKb4PTU= `经过服务器确认，并且加密过后的 Sec-WebSocket-Key`
Sec-WebSocket-Protocol：chat  `表示最终使用的协议`

Sec-WebSocket-Key 的加密过程为：

  1. 将Sec-WebSocket-Key跟258EAFA5-E914-47DA-95CA-C5AB0DC85B11拼接。
  2. 通过SHA1计算出摘要，并转成base64字符串。

3、双方握手成功后，就是全双工的通信了，接下来就是用websocket协议来进行通信了。

5.3 Ajax 轮询、长轮询、WebSocket原理解析

1、ajax轮询

让浏览器每隔一定的时间就发送一次请求，询问服务器是否有新信息。

2、长轮询（Long Poll）

采用的阻塞模式。客户端发起连接后，如果没消息，服务器不会马上告诉你没消息，而是将这个请求挂起（pending），直到有消息才返回。返回完成或者客户端主动断开后，客户端再次建立连接，周而复始。Comet就是采用的长轮询。

3、websocket

WebSocket 是类似 Socket 的TCP长连接通讯模式。一旦 WebSocket 连接建立后，后续数据都以帧序列的形式传输。而且浏览器和服务器就可以随时主动发送消息给对方，是全双工通信。

优点：在海量并发及客户端与服务器交互负载流量大的情况下，极大的节省了网络带宽资源的消耗，有明显的性能优势，且客户端发送和接受消息是在同一个持久连接上发起，实时性优势明显。

6. HTTP2

2015年发布，它是基于SPDY的，以下是它的一些新特性：

1、 二进制分帧：

http/1.x 是一个超文本协议，而 http2 是一个二进制协议，被称之为二进制分帧。
二进制格式在协议的解析和优化扩展上带来更多的优势和可能。

协议格式为帧，帧由 Frame Header（头信息帧）和 Frame Payload（数据帧）组成，如下所示：
Alt text

  • Length 字段用来表示 Frame Payload 数据大小。
  • Type 字段用来表示该帧中的 Frame Payload 保存的是 header 数据还是 body 数据。除了用于标识 header/body，还有一些额外的 Frame Type。
  • Stream Identifier 用来标识该 frame 属于哪个 stream。
  • Frame Payload 用来保存 header 或者 body 的数据。

2、头部压缩 HPACK：

请求和响应首部压缩，客户端和服务端共同维护一张头信息表，所有字段存入这个表，生成一个索引号，通过发送索引号提高速度。HPACK压缩会经过两步:

  • 传输的value,会经过一遍Huffman coding来节省资源；
  • 为了server和client同步, 两边都需要保留一份Header list, 并且,每次发送请求时,都会检查更新。

3、服务端推送：

服务端主动向客户端推送数据。如果客户端请求一个html文件，服务端把html文件返回给客户端之后，还会相应的把html文件中的js、css、图片推送给客户端。

4、多路复用：

只需要建立一个TCP连接，浏览器和服务器可以同时发送多个请求或者回应，而且不需要按照顺序一一对应，避免了“队头阻塞”。

5、数据流：

当客户端同时向服务端发起多个请求，那么这些请求会被分解成一一个的帧，每个帧都会在一个 TCP 链路中无序的传输，同一个请求的帧的 Stream Identifier 都是一样的。当帧到达服务端之后，就可以根据 Stream Identifier 来重新组合得到完整的请求。

并且规定：客户端发出的数据流ID为奇数，服务器发出的ID为偶数。Stream Identifier （数据流ID）就是用来标识该帧属于哪个请求的。

7. HTTPS

HTTPS = HTTP+加密+认证+完整性保护

它的加密过程是：

  1. server生成一个公钥和私钥，把公钥发送给第三方认证机构（CA）；
  2. CA把公钥进行MD5加密，生成数字签名；再把数字签名用CA的私钥进行加密，生成数字证书。CA会把这个数字证书返回给server；
  3. server拿到数字证书之后，就把它传送给浏览器；
  4. 浏览器会对数字证书进行验证，首先，浏览器本身会内置CA的公钥，会用这个公钥对数字证书解密，验证是否是受信任的CA生成的数字证书；
  5. 验证成功后，浏览器会随机生成对称秘钥，用server的公钥加密这个对称秘钥，再把加密的对称秘钥传送给server；
  6. server收到对称秘钥，会用自己的私钥进行解密，之后，它们之间的通信就用这个对称秘钥进行加密，来维持通信。

下图是加密过程的图解，可以对照着图片理一遍。

Alt text

8. HTTP缓存机制

8.1 缓存分类

HTTP的缓存分为强缓存和协商缓存（对比缓存）。

  1. 强制缓存

在缓存数据未失效的情况下，可以直接使用缓存数据；在没有缓存数据的时候，浏览器向服务器请求数据时，服务器会将数据和缓存规则一并返回，缓存规则信息包含在响应header中。

  • Expires：缓存过期时间（HTTP1.0）

    缺点：生成的是绝对时间，但是客户端时间可以随意修改，会导致误差。

  • Cache-Control ：HTTP1.1，优先级高于Expires

    可设置参数：

    private: 客户端可以缓存

    public: 客户端和代理服务器都可缓存

    max-age=xxx: 缓存的内容将在 xxx 秒后失效

    no-cache: 需要使用协商缓存来验证缓存数据（后面介绍）

    no-store: 所有内容都不会缓存，强制缓存，对比缓存都不会触发

Expires和Cache-Control决定了浏览器是否要发送请求到服务器，ETag和Last-Modified决定了服务器是要返回304+空内容还是新的资源文件。

  1. 协商缓存

浏览器第一次请求数据时，服务器会将缓存标识与数据一起返回给客户端，客户端将二者备份至缓存数据库中。再次请求数据时，客户端将备份的缓存标识发送给服务器，服务器根据缓存标识进行判断，判断成功后，返回304状态码，通知客户端比较成功，可以使用缓存数据。

  • Last-Modified / If-Modified-Since

Last-Modified：服务器在响应请求时，告诉浏览器资源的最后修改时间。
If-Modified-Since：再次请求服务器时，通过此字段通知服务器上次请求时，服务器返回的资源最后修改时间。

缺点：Last-Modified 标注的最后修改时间只能精确到秒，如果有些资源在一秒之内被多次修改的话，他就不能准确标注文件的新鲜度了。如果某些资源会被定期生成，当内容没有变化，但 Last-Modified 却改变了，导致文件没使用缓存有可能存在服务器没有准确获取资源修改时间，或者与代理服务器时间不一致的情形。

  • Etag / If-None-Match（优先级高于Last-Modified / If-Modified-Since）

Etag：给资源计算得出的一个唯一标志符。
If-None-Match：再次请求服务器时，通过此字段通知服务器客户端缓存数据的唯一标识。

8.2 缓存判断顺序

  1. 先判断Cache-Control，在Cache-Control的max-age之内，直接返回200 from cache；
  2. 没有Cache-Control再判断Expires，再Expires之内，直接返回200 from cache；
  3. Cache-Control=no-cache或者不符合Expires，浏览器向服务器发送请求；
  4. 服务器同时判断ETag和Last-Modified，都一致，返回304，有任何一个不一致，返回200。

具体过程如下图：

Alt text

9. 跨域

跨域产生的原因，是因为受到同源策略的限制。同源策略指的是协议、域名、端口不相同。这里我将介绍三种跨域的方式：JSONP、CORS(跨域资源共享)、document.domain + iframe。

9.1 JSONP

1. 原理

动态插入script标签（因为script标签不受同源策略的限制），通过插入script标签引入一个js文件，这个js文件加载成功之后会执行我们在url中指定的回调函数，并且会把我们需要的json数据作为参数传入。

2. 实现

（1）原生实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var script = document.createElement('script');
script.type = 'text/javascript';

// 传参并指定回调执行函数为onBack
script.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack';
document.head.appendChild(script);

// 回调函数
function onBack(res) {
    alert(JSON.stringify(res));
}
    
//服务端返回如下（返回时即执行全局函数）：
onBack({"status": true, "user": "admin"})

（2）jquery ajax：

1
2
3
4
5
6
7
$.ajax({
    url: 'http://www.domain2.com:8080/login',
    type: 'get',
    dataType: 'jsonp',  // 请求方式为jsonp
    jsonpCallback: "onBack",    // 自定义回调函数名
    data: {}
});

9.2 CORS

1. 原理

服务器在响应头中设置相应的选项，浏览器如果支持这种方法的话就会将这种跨站资源请求视为合法，进而获取资源。

2. 实现

CORS分为简单请求和复杂请求，简单请求指的是：

（1）请求方法是以下三种方法之一：HEAD、GET、POST；

（2）HTTP的头信息不超出以下几种字段：
Accept、Accept-Language、Content-Language、Last-Event-ID、
Content-Type（只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain）。

其他情况就是非简单请求了。

  • 简单请求

（1）请求头：

1
Origin: http://www.domain.com

（2）响应头：

1
2
3
Access-Control-Allow-Origin: http://www.domain.com
Access-Control-Allow-Credentials: true   `是否允许传送cookie`
Access-Control-Expose-Headers: FooBar `CORS请求时，只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须指定。`

（3）另外，ajax请求中,如果要发送Cookie，Access-Control-Allow-Origin就不能设为星号，必须指定明确的、与请求网页一致的域名，还要设置以下内容：

1
2
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
  • 非简单请求

（1）预检请求:

1
2
3
4
OPTIONS /cors HTTP/1.1  `OPTIONS请求是用来询问的`
Origin: http://www.domian.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header

（2）响应头：

1
2
3
4
5
Access-Control-Allow-Origin: http://www.domain.com
Access-Control-Allow-Methods: GET, POST, PUT  `服务器支持的所有跨域请求的方法`
Access-Control-Allow-Headers: X-Custom-Header  `服务器支持的所有头信息字段，不限于浏览器在"预检"中请求的字段。`
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 1728000  `指定本次预检请求的有效期，单位为秒`

（3）之后的步骤就同简单请求了。

这是CORS的整个流程图：
Alt text

与JSOP的比较：

JSONP只支持GET请求，CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。

9.3 document.domain + iframe

此方案仅限主域相同，子域不同的跨域应用场景。

1.原理

两个页面都通过js强制设置document.domain为基础主域，就实现了同域。

2.实现

（1）父窗口：(www.domain.com/a.html)

1
2
3
4
5
6
<iframe id="iframe" src="http://child.domain.com/b.html"></iframe>

<script>
    document.domain = 'domain.com';
    var user = 'admin';
</script>

（2）子窗口：(child.domain.com/b.html)

1
2
3
4
5
<script>
    document.domain = 'domain.com';
    // 获取父窗口中变量
    alert('get js data from parent ---> ' + window.parent.user);
</script>

先写这么多，后续我会继续补充的，像cookie，session那些我以后会加进来的。