学习http协议

总览

• 首先查看是否需要跳转
• 查看浏览器是否进行过缓存
• DNS解析域名，转换成IP地址
• TCP三次握手之后，创建链接
• 发送http请求的数据包
• 服务器接收数据，返回数据

网络模型介绍

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

传输层

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

应用层

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

HTTP历史

http/0.9

• 只有一个GET命令
• 没有HEADER等描述数据的信息
• 服务器发送完毕，就关闭TCP连接（对应多个http请求）

http/1.0

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

http/1.1

• 持久TCP连接
• pipline
• 增加了host和其他一些命令

http/2

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

HTTP的三次握手

在服务端和客户端进行数据传输要建立TCP connection（请求和响应的传输通道，可以发送多个网络请求），

三次握手的原因：防止服务端开启无用的连接（如果只有第一次握手，在服务端向客户端发送数据时，请求超时，而服务端会以为连接成功）

URI，URL，URN

uniform resource identifier/统一资源标志符
uniform resource locator/统一资源定位器

http报文格式

起始行：请求报文：{网络请求方法，路由，协议} 响应报文：{协议 status code}
首部空行之后为主体

http方法

用来定义对资源的操作

http code

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

CORS

Cross-Origin Resource Sharing,跨域资源共享
定义了在必须跨源资源时，浏览器与服务器应该如何沟通。CORS背后的思想就是使用自定义的HTTP头部，让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是失败。

Cache-Control

可缓存性

• public//任何地方
• private//发送请求的浏览器
• no-cache//不可以

到期

• max-age= <second>//多长时间过期
• s-maxage= <second>//代理服务器中会先读取s-maxage而不是max-age
• max-stale= <second>//即便缓存过期，在max-stale中仍然可以，（在发起端中才可以设置）

重新验证

• must-revalidate（过期后要重新验证）
• proxy-revalidate

其他

• no-store
• no-transform(不可以改变缓存内容)
  对比
  no-cache 可以在本地缓存，可以在代理服务器缓存，但是这个缓存要服务器验证才可以使用
  no-store 彻底得禁用缓冲，本地和代理服务器都不缓冲，每次都从服务器获取

资源验证

验证头

• last-modified（上次修改时间，配合If-Modified-Since或者If-Unmodified-Since使用，对比上次修改时间以验证资源需要更新）
• Etag(数据签名，资源对内容产生唯一的签名，修改后就会改变；配合if-match或者if-none-match，对比资源的签名判断是否需要缓存 )

const http = require('http')
const fs = require('fs')

http.createServer((req, res)=> {
   console.log('request come', req.url)

   if (req.url === '/') {
       const html = fs.readFileSync('test.html', 'utf8')
       res.writeHead(200, {
           'Content-Type': 'text/html'
       })
       res.end(html)
   }
   if (req.url === '/script.js') {
       res.writeHead(200, {
           'Content-Type': 'text/javascript',
           'Cache-Control': 'max-age=200000000, no-cache',
           'last-Modified': '123',
           'Etag': '777'
       })
       const etag = req.headers['if-none-match']
       if (etag === '777') {
           res.writeHead(304, {
               'Content-Type': 'text/javascript',
               'Cache-Control': 'max-age=200000000, no-cache',
               'last-Modified': '123',
               'Etag': '777'
           })
           res.end('')
       }else {
           res.writeHead(200, {
               'Content-Type': 'text/javascript',
               'Cache-Control': 'max-age=200000000, no-cache',
               'last-Modified': '123',
               'Etag': '777'
           })
       }
       res.end('console.log("script load")' )
   }

}).listen(8888)

cookie 和 session

服务器返回数据时通过set-cookie返回到浏览器，并保存到浏览器中的内容；同域请求中保证为统一用户

• 通过Set-Cookie设置
• 下次请求会自动带上
• 键值对，可以设置多个

Cookie属性

• max-age和expires设置过期时间
• Secure只在https的时候发送
• HttpOnly无法通过document.cookie访问

session

• 使用cookie保存session

HTTP长连接

http的链接是在TCP的链接上进行发送的；TCP链接分为长链接（是否关闭TCP链接，关闭就是短链接，否则为长链接）和短链接

数据协商

服务端和客户端协商数据内容

Accept（客户端）

Accept
Accept-Encoding
Accept-Language
User-Agent

Content（服务端）

Content-Type
Content-Encoding
Content-Language

Redirect

浏览器请求的位置不再某个地方，通过Redirect指向另一个地方

const http = require('http')
const fs = require('fs')

http.createServer((req, res)=>{
    console.log('req come', req.url)
    if (req.url === '/') {
        res.writeHead(302, {
            'Location': '/new'
        })
        res.end('')
    }
    if (req.url === '/new') {
        res.writeHead(200, {
            'Content-Type': 'text/html'
        })
        res.end('<div>this is content</div>')
    }
}).listen(3333)
//302是指临时跳转
//301是指永久跳转

Content-Security-Policy

限制资源获取
报告资源获取越权
default-src限制全局
制定资源类型（img-src style-src font-src…）