HTTP 协议原理与实践

[MrZWH]

浏览器输入 URL 后 HTTP 请求返回的完整过程：

[MrZWH]

HTTP 协议基础及发展史

5层网络模型介绍

低三层

• 物理层主要作用是定义物理设备如何传输数据
• 数据链路层在通信的实体间建立数据链路连接
• 网络层为数据在结点之间传输创建逻辑链路

传输层

• 向用户提供可靠的端到端（End-to-End）服务
• 传输层向高层屏蔽了下层数据通信的细节

应用层

• 为应用软件提供了很多服务
• 构建与 TCP 协议之上
• 屏蔽网络传输相关细节

HTTP 协议的发展史

HTTP/0.9

• 只有一个命令 GET
• 没有 HEADER 等描述数据的信息
• 服务器发送完毕就关闭 TCP 连接

HTTP/1.0

• 增加了很多命令
• 增加 status code 和 header
• 多字符集支持、多部分发送、权限、缓存等

HTTP/1.1

• 持久连接
• pipeline
• 增加 host 和其他一些命令

HTTP/2

• 所有数据以二进制传输
• 同一个连接里面发送多个请求不再需要按照顺序来
• 头信息压缩以及推送等提高效率的功能

HTTP的三次握手

URI 、URL、URN

URI

• Uniform Resource Identifier 统一资源标志符
• 用来唯一标识互联网上的信息资源
• 包括 URL 和 URN

URL

• Uniform Resource Locator 统一资源定位器

URN

• 永久统一资源定位符
• 在资源移动之后还能被找到
• 目前还没有非常成熟的使用方案

HTTP 报文格式

HTTP 方法

• 用来定义对于资源的操作
• 常用有 GET、POST 等
• 从定义上讲有各自的语义

HTTP CODE

• 定义服务器对请求的处理结果
• 各个区间的 CODE 有各自的语义
• 好的 HTTP 服务可以通过 CODE 判断结果

创建一个简单的 web 服务

// server.js
const http = require('http')
http.createServer(function (request, response) {
  console.log('request come', request.url)

  response.end('123')
}).listen(8888)

[MrZWH]

HTTP 各种特性总览

CORS 预请求

允许的方法：GET、HEAD、POST。
允许的 Content-Type：text/plain、multipart/form-data、application/x-www-form-urlencoded。
其他限制：请求头限制、XMLHttpRequestUpload 对象均没有注册任何事件监听器、请求中没有使用 ReadableStream 对象。
后端返回请求中解除限制设置的头：

• Access-Control-Allow-Headers:
• Access-Control-Allow-Methods:
• Access-Control-Allow-Origin:
• Access-Control-Max-Age:

缓存 Cache-Control

可缓存性：public（代表 http 经过的任何地方都能进行缓存）、private（只有浏览器才可以缓存）、no-cache（任何节点都不缓存，本地可以使用缓存但是要等服务器验证之后）。
到期：

• max-age=
• s-maxage= 只在代理服务器生效高于上一个的优先级
• max-stale= 再发起端的头中设置的，旨在上面时间过期后在一段时间内任然使用缓存
  重新验证：
• must-revalidate
• proxy-revalidate
  其他：
• no-store （彻底的本地和代理服务器都不可以使用缓存）
• no-transform 告诉代理服务器不要随便改动内容

缓存验证Last-Modified和Etag的使用

last-Modified：

• 上次修改时间
• 配合 If-Modified-Since 或者 If-Unmodified-Since 使用
• 对比上次修改时间以验证资源是否需要更新
  Etag：
• 数据签名
• 配合 If-Match 或者 If-None-Match 使用
• 对比资源的签名判断是否使用缓存

const etag = request.headers['if-none-match']
if (etag === '777') {
  response.writeHead(304, {
    'Content-Type': 'text/javascript',
    'Cache-Control': 'max-age=2000000, no-cache',
    'Last-Modified': '123',
    'Etag': '777'
  })
  response.end('')
}

cookie和session

Cookie:

• 通过 Set-Cookie 设置
• 下次请求会自动带上
• 键值对，可以设置多个
  Cookie 属性
• max-age 和 expires 设置过期时间
• Secure 只在 https 的时候发送
• HttpOnly 无法通过 document.cookie 访问
• domain 在同一个主域名下面它的二级域名可以共享它的 cookie

HTTP 长连接

如何保证服务创建的是长连接而不是短链接呢：在 Response Headers 中有一个头 Connection: Keep-Alive

数据协商

分类：请求、返回。
Accept：

• Accept
• Accept-Encoding 表面我的数据是一个怎样的编码方式来进行传输，主要的限制就是服务端如何对数据进行压缩
• Accept-Language
• User-Agent
  服务端返回的 Content：
• Content-Type
• Content-Encoding
• Content-Language
  服务端返回的头里面可以设置一个 X-Content-Type-Options: nosniff 这个主要是因为当没有设置返回的 Content-Type 时有些浏览器会自己预测你返回文件的类型，这样不安全，这个头就是告诉浏览器不要预测。
  向服务端发送数据的时候也可以 发送 Content-Type 头告诉服务端如何解析数据。
  浏览器开发者工具中勾选Preserve log可以在页面跳转后把之前的http 请求信息打印出来

Redirect

如果客户端向服务器请求一个资源，但是这个资源目前不在该路径下，服务器就该告诉客户端应该去哪里请求资源。

response.writeHead(302, {
  'Location': '/new'
})
response.end('')

302 的语义代表临时跳转，301 代表你确定跳转的路径表永久跳转，302每次都需要经过服务器去改变路径而301会让浏览器去记住改变。

Content-Security-Policy (内容安全策略)

作用：

• 限制资源获取
• 报告资源获取越权
  限制方式：
• default-src 限制全局
• 制定资源类型（connect-scr、img-src、manifest-src、style-src、font-src、frame-src、script-src、media-src ...）

[MrZWH]

Nginx 代理以及面向未来的 HTTP

Nginx 安装和基础代理配置

Nginx 代理配置和代理缓存的用处

HTTPS 解析

使用 Nginx 部署 HTTP 服务

HTTP2 的优势和 Nginx 配置 HTTP2 的简单使用

优势：

• 信道复用
• 分帧传输
• Server Push

curl -v https://test.com

[MrZWH]

总结

内容：

• HTTP 原理（如何去发送一个HTTP请求以及它是如何返回的）
• HTTP 技术点（HTTP 头相关的作用）
• Nginx 实践、面向未来的 HTTP