前端也需要深度了解HTTPS协议

背景

对于熟练的前端开发来说，http请求是最常见不过的家常便饭；从XHR到Ajax再到Axios，发起一个http/https请求是再简单不过的需求；不管在哪个浏览器，在F12开发者菜单中，分析一个http请求都格外容易；但是当你负责的内容从仅仅发起客户端请求接受服务器响应，到负责nginx配置、DNS解析、证书配置等领域时，你会认识到前端发起的http请求，只是互联网分层协议中最上面的应用层；一旦涉及解决浏览器无法访问服务器、或者DNS无法正确解析域名、WSS协议握手失败等领域，仅仅靠F12，那你只能看到一个个红色的http请求和零星几个错误提示，某些情况下，甚至都没有到达http开始请求。两眼一摸黑乱猜了；

（部分大图由于公司网络问题无法上传。后续有机会补上；）

引子问题

最近定位了一个Websocket在域名解析IP发生变化后，无法建立连接的问题。颇有感触；问题是，产品在主用态站点下电，备用态站点升主后，浏览器所有https的请求均可以根据DNS解析的结果进行新服务器选择，但是websocket却一直在尝试连接下电的老备用态服务器，无法切换。通过传统的控制台，只能看到websocket一次一次建链失败，同时抓包发现一直建链的是下电的服务器。这时候除了怀疑浏览器对websocket协议DNS解析策略和https不一致，无其他法；故只能硬着头皮抓包，分析原理；但是抓包工具如何使用，如何理解抓包结果，又成为阻塞问题解决的路径。故一不做二不休，彻底学一下计算机网络基础知识；

关于如何使用wireshark抓取https请求可以参加我的这篇文章；

前置知识

从互联网分层开始

这里只放一张图，具体网上文章很多，总结一句话，互联网分层协议是一切网络的基础，没有这个分层协议，就不可能存在互联网；分层协议主要就说两种，一种是OSI 7层模型，另一种是现在最常用的TCP/IP四层结构；关于两者区别，网上都说是OSI 7层模型是模型，而TCP/IP是基于模型实现的具体协议；
但是实际情况是，TCP/IP 先于 OSI 7层模型提出，没有参考OSI的说法；只是当时ISO为了抢占当时互联网的规则制定者而做的尝试；事实证明后来TCP/IP模型得到了更多的应用；关于第三种分层就是5层协议，是业界产生出来的非官方协议模型。这里不展开说明。

每一层都有对应的协议族。今天我们的主角HTTPS协议就在应用层，最上面一层；应用层的协议想必都耳熟能详。例如http、ftp、SMTP、pop3、telnet等等；

从这张图我们可以得到

T