HTTP实用指南|笔记HTTP实用指南初识HTTP 什么是HTTP 协议分析发展报文场景分析静态资源登录实

HTTP实用指南

初识HTTP

什么是HTTP

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

协议分析

发展

HTTP/2:更快,更稳定,更简单

帧(frame):HTTP/2通信的最小单位,每个帧都包含帧头,至少也会标识出当前帧所属的数据流
二进制,加入了一些新的压缩算法,使传输效率更高

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

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

HTTPS

HTTPS : Hypertext Transfer Protocol Secure

经过TSL/SSL加密
对称加密:加密和解密都是使用同一个密钥
非对称加密,加密和解密需要使用两个不同的密钥:公钥(public key)和私钥(private kcy)
一般对称和非对称混用

报文

Requests与Responses的结构是一致的:都有
- 起始行:承载一些信息
- headers
- 实体信息
Requests与Responses的起始行有不同的构成
- Requests:方法+目标地址
- Responses:这次返回请求处理的结果:状态码

Method

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

状态码

200 OK-客户端请求成功
301-资源(网页等)被永久转移到其它URL
302-临时跳转
401 Unauthorized-请求未经授权
404-请求资源不存在,可能是输入了错误的URL
500-服务器内部发生了不可预期的错误
504 Gateway Timeout-网关或者代理的服务器无法在规定的时间内获得想要的响应

RESTful API

RESTful API:一种API设计风格;REST-Representational State Transfer
(1)每一个URI代表一种资源; (2)客户端和服务器之间,传递这种资源的某种表现层; (3)客户端通过HTTP method,对服务器端资源进行操作,实现“表现层状态转化”

常用请求头

Accept:接收类型,表示浏览器支持的MIME类型(对标服务端返回的Content-Type)
Content-Type:客户端发送出去实体内容的类型
Cache-Control:指定请求和响应遵循的缓存机制,如no-cache
If-Modified-Since:对应服务端的Last-Modified,用来匹配看文件是否变动,只能精确到1s之内缓存
Expires:缓存控制,在这个时间内不会请求,直接使用缓存,服务端时间
Max-age:代表资源在本地缓存多少秒,有效时间内不会请求,而是使用缓存
If-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头部(譬如为*)

缓存

缓存指的是临时存储数据以提高访问速度的机制。在Web开发中，缓存主要分为两种：强缓存和协商缓存

强缓存

完全根据缓存控制，不与服务器通信，能提高响应速度。

Expires:时间戳
Cache-Control
- 可缓存性
  - no-cache:协商缓存验证
  - no-store :不使用任何缓存
- 到期
  - max-age:单位是秒,存储的最大周期,相对于请求的时间
- 重新验证/重新加载
  - must-revalidate:一旦资源过期,在成功向原始服务器验证之前,不能使用

协商缓存

依赖于与服务器的交流，可以确保获取最新的资源，而非盲目使用缓存。成对存在

Etag/If-None-Match:资源的特定版本的标识符,类似于指纹
Last-Modified/If-Modified-Since:最后修改时间

优先级

cookie

中的Set-Cookie - response

Name=value 各种cookie的名称和值
Expires=Date Cookie的有效期,缺省时Cookie仅在浏览器关闭之前有效
Path=Path 限制指定Cookie的发送范围的文件目录,默认为当前
Domain=domain 限制cookie生效的域名,默认为创建cookie的服务域名
secure 仅在HTTPS安全连接时,才可以发送Cookie
HttpOnly JavaScript 脚本无法获得Cookie 进一步加强安全性
SameSite=[None|Strict|Lax] 是防范某些类型的跨站点请求伪造（CSRF）攻击的有效手段
- None 同站、跨站请求都可发送
- Strict 仅在同站发送
- 允许与顶级导航一起发送,并将与第三方网站发起的GET请求一起发送

场景分析

静态资源

缓存策略:强缓存--Cache-control:一年
允许所有域名访问
资源类型:CSS
静态资源方案:缓存+CDN+文件名hash
- CDN : Content Delivery Network 内容分发传输时间缩短
  - 通过用户就近性和服务器负载的判断,CDN确保内容以一种极为高效的方式为用户的请求提供服务
  - 如何确保用户拿到最新的资源:更新文件名

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
代理服务器常用
- 同源策略是浏览器的安全策略,不是HTTP的
Iframe
- 诸多不便

鉴权

Session+cookie 大部分
JWT(JSON web token)

跳转后的网站为什么自动登录
这些网站都是子站点还有一个大站点
登录共享:SSO-单点登录(Single Sign On)

实战

发起HTTP协议

根据不同的环境来看,比较重要的环境-浏览器

浏览器

XHR

在浏览器里面内置了XHR:XMLHttpRequest 专门发起请求的对象

    function request(option) {
        if (String(option) !== '[object Object]'){
            return undefined
        }
        option.method = option.method ? option.method.toUpperCase() : 'GET'
        option.data = option.data || {}
        var formData = []
        for (var key in option.data) {
            formData.push(''.concat(key, '=', option.data[key]))
        }
        option.data = formData. join( '&' )
    
        if (option.method === 'GET' ) {
            option.url += location.search.length === 0 ? ''.concat('?', option.data) : ''.concat('&',option.data)
        }
        
        var xhr = new XMLHttpRequest()
        xhr. responseType = option. responseType | | 'json'
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    if (option. success && typeof option. success === 'function' ) {
                        option.success(xhr.response)
                    }
                } else {
                    if (option.error && typeof option.error === 'function') {
                        option.error( )
                    }
                }
            }
        }
        xhr.open(option.method, option.url, true)
        if (option.method === 'POST' ) {
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        }
        xhr.send(option.method === 'POST' ? option.data : null)
    }

在Web开发中，XMLHttpRequest对象的readyState属性表示请求的状态。
- 这个属性可以取以下几个值，每个值对应请求的不同阶段：
  - 0 - UNSENT：表示XMLHttpRequest对象已创建，但尚未调用open()方法。此时对象初始化为空，还没有开始请求。
  - 1 - OPENED：表示已经调用了open()方法，此时可以设置请求参数，如URL和回调函数，但尚未调用send()方法。
  - 2 - HEADERS_RECEIVED：表示已经调用了send()方法，响应头和响应状态已可获取，但响应体尚未接收完全。
  - 3 - LOADING：表示正在下载响应体，响应体部分可用。
  - 4 - DONE：表示请求已结束，响应体已完全接收，可以访问服务器的响应。

Fetch

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

    postData('http://example.com/answer', {answer: 42})
        .then(data => console. log(data)) 
        .catch(error => console.error(error) )
    
    function postData(url, data) {
        return fetch(url, {
            body: JSON. stringify(data), 
            cache: 'no-cache', 
            credentials: 'same-origin', 
            headers: {
                'user-agent': 'Mozilla/4.0 MDN Example',
                'content-type' : 'application/json'
            },
            method: 'POST', 
            mode: 'cors', 
            redirect: 'follow', 
            referrer: 'no-referrer', 
        })
            .then(response => response. json( ) ) 
    }

node

标准库:HTTP/HTTPS

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

    const https = require('https');
    https.get('https://test.com?api_key=DEMO_KEY', (resp) => {
        let data = '';
        resp.on('data', (chunk) => {
            data += chunk;
        });
        resp.on('end', () => {
            console. log(JSON.parse(data).explanation);
        });
    }).on("error", (err) => {
        console. log("Error: " + err.message);
    });

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

用户体验

网络优化

CDN
- 是否开启CDN的H2性能对比

预解析,预链接

    <link rel="dns-prefetch" href="//example.com">
    <link rel="preconnect" href="//cdn.example.com" crossorigin>

稳定性

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

了解更多

通信方式

HTTP 大部分底层:TCP
WebSocket 实时性要求高

WebSocket

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

QUIC

Quick UDP Internet Connection

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

HTTP实用指南|笔记