HTTP 协议学习笔记(扫盲文)

作为一个前端,了解下 HTTP 协议是很有必要的。

先说个题外话,从《跃迁》一书中提到,高手获取信息的方式 —— 只获取一手、二手资料。
我在学习 HTTP 协议的时候犯了的毛病是 —— 百度了一堆 HTTP 相关文章,内容不一、质量参差不齐,看得云里雾里。最后干脆去Google查 HTTP,发现在 MDN 上有详细的 HTTP 相关资料,于是抛弃三手、四手资料,直接去看 MDN 上的内容。
所以学习知识,必须得先认清资料的来源和专业程度,在知识源头学习可以提高学习的效率和准确性。

简介

HTTP是一种能够获取如 HTML 这样的网络资源的 protocol(通讯协议)。它是在 Web 上进行数据交换的基础,是一种 client-server 协议,也就是说,请求通常是由像浏览器这样的接受方发起的。一个完整的Web文档通常是由不同的子文档拼接而成的,像是文本、布局描述、图片、视频、脚本等等。

这里加上我个人的理解:HTTP 是一种在客户端和服务端之间传输信息的传输协议,或者说是一整套传输方案。所以,像 Headers、Cookie、Methods 等都是 HTTP 协议中的内容。用于更好的解决 client-server 传输信息中遇到的各种问题。

关于HTTP的更多历史信息,可以看到阮一峰老师的HTTP 协议入门(阮一峰老师写的文章还是那么清晰明了,向老师学习!)。

TCP/IP 三次握手

HTTP 的传输协议是 TCP/IP 协议,该协议连接是需要进行三次握手的。
那么为什么必须是三次?

这个问题的本质是:信道不可靠,但是通信双发需要就某个问题达成一致。而要解决这个问题,无论你在消息中包含什么信息,三次通信是理论上的最小值。所以三次握手不是TCP本身的要求,而是为了满足"在不可靠信道上可靠地传输信息"这一需求所导致的。

以下列出三次握手具体步骤与理解:

  • 客户端发送 SYN 报文给服务器端,进入 SYN_SEND 状态。 —— 客户端向服务器端发送消息,请求它的回应。
  • 服务器收到 SYN 报文,回应一个 SYN ACK 报文,进入 SYN_RECV 状态。 —— 服务器端收到消息,采取回应行为,回复消息告诉客户端收到了。
  • 客户端收到服务器 SYN 报文,回应一个 ACK 报文,进入连接状态。 —— 客户端收到消息,这时客户端收到响应,表明发送的数据有回信了。但是服务器端发送了回应却还不知道客户端有没有收到。这时客户端需要再次发送消息告诉服务器我收到了。服务器收到消息后,客户端和服务器都知道对方已准备好通讯,然后就开始连接通讯了。

HTTP 的请求(request)和响应(response)

请求

请求为客户端发送给服务器的数据。具体有如下数据:

  • 请求方法:如 GET、 POST 这类请求方法。
  • 要获取的资源路径。
  • HTTP协议版本号。
  • Headers:传递附加信息。
  • body:如果想 POST 请求,就会传递 body 资源数据给服务器。
Request

响应

响应为服务器收到客户端发送数据返回的数据,具体有如下数据:

  • HTTP协议版本号。
  • 状态码(status code):告知请求是否成功以及失败原因。
  • 状态消息(status message):非权威状态码信息,由服务器自行设定。
  • Headers:传递附加信息。
  • body: 响应返回的资源存在body中。一般返回图片、HTML等资源。
Response

Headers 头文件

头文件允许客户端和服务器通过请求和响应传递附加信息。
下面列出一些常用的消息头及其用法:

  • Date 信息来源的日期时间
  • Content-Type 指定服务器文档的MIME类型,帮助用户代理去处理接收到的数据。
  • Content-Length 表示 body 的字节长度。
  • Host 服务器的域名。
  • User-Agent 可以用来识别发送请求的浏览器,是产品标记符和注释的清单。
  • Accept 用户代理期望的MIME类型列表
  • Accept-Encoding 列出用户代理支持的压缩方法
  • Accept-Ranges 期望范围。参数:byte、none。
  • Assess-Control-Allow-Origin 允许组织连接控制 。
  • Age 对象在代理缓存中的时间
  • Cache-Control 指定缓存机制
  • Connection 是否保持网络连接打开状态。参数:keep-alive、close。
  • ETag 特定版本资源标识符
  • Expires 过期时间日期
  • Server 服务器信息,如JSP、Apache等。
  • Referer 可用于识别用户访问位置

还有一些自定专用消息头可通过 X- 前缀来添加。如 x-oss-object-type

状态码

状态码是由服务器端发送的响应中带有的请求结果的信息码。可以分为以下几类:

  • 1** 信息响应
  • 2** 成功响应
  • 3** 重定向
  • 4** 客户端响应
  • 5** 服务器响应

列一些常见的状态返回码:

  • 200 请求成功。
  • 304 未修改。
  • 401 当前请求需要用户验证。
  • 404 未找到资源。
  • 500 服务器内部错误,无法完成请求。

状态码其实只要了解常用的,冷门的遇到的时候查查 MDN 就好了。

Cookie

Cookie 是服务器发送到用户浏览器并保存在本地的一小块数据,它会在浏览器下次向同一服务器发起请求时被懈怠并发送到服务器上。
HTTP 本质上无状态,使用 Cookie 可以创建有状态会话。服务器指定 Cookie 后,浏览器的每次请求都会携带 Cookie 数据。所以,Cookie 常被用来验证用户登录信息。
更多 Cookie 内容请看 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Cookies

跨域

跨域就是获取不同域名下服务器的数据。跨域对于 GET 请求没有影响。对于其他请求,会先发送一个 OPTIONS 方法发送一个预检请求,获知服务端是否允许跨域请求。
所以,之前遇到 POST 方法请求变为 OPTIONS 请求报错的问题就是跨域问题。
在 Express 中也遇到个跨域问题,最终使用 $ npm install cors 的方式解决了。

HTTPS

HTTP 和 HTTPS 的区别

因为 HTTP 所封装的信息是明文的,通过抓包工具可以分析其信息内容。所以 HTTP 是及其不安全的。
而 HTTPS 在 HTTP 传输协议的基础上加上了 SSL/TLS 加密协议,所以传输的信息都是加密过的。不易被截获信息内容。所以 HTTPS 比 HTTP 安全性更高。

HTTPS 运行机制

大致运行步骤如下:

  1. 客户端发起 HTTPS 请求
  2. 服务端获取数字证书CA —— 服务器向数字证书认证机构申请获取数字证书 CA 表明服务器是合法的、无害的。
  3. 传送数字证书 —— 将数字证书传给客户端
  4. 客户端解析证书 —— 客户端向数字证书认证机构查询,验证服务器合法性。
  5. 客户端传输加密后信息给服务端
  6. 服务端解密信息
  7. 服务端传输加密后的信息给客户端
  8. 客户端解密信息

常见加密算法

非对称加密算法:RSA,DSA/DSS
对称加密算法:AES,RC4,3DES
HASH算法:MD5,SHA1,SHA256

最后

发现网上写 HTTP 协议的文章很多,但是众口不一,每篇博客的内容都有所不同,搜集资料的时候还是蛮困惑的。
本文整理了一些 HTTP 的基础知识,写的不够详细。更加深入的学习通过查 MDN 来解决问题啦~

参考资料

更新内容

本文只是 HTTP 的扫盲文,并没有深入学习 HTTP 的意思,其实深入学习 HTTP 水还是很深的。换位思考,我感觉面试官问 HTTP 相关问题的主要目的是:能够很好与后端工程师沟通接口问题;更好处理前端工作中网络传输的问题;保证项目的信息安全;前端工程师作为客户端方的开发,也有必要和服务器端的后端工程师合作将程序开发的高效、安全、易维护。
--03-19更新--
我去问了一位前辈前端为什么要学习 HTTP 协议,大牛前辈的回答是这样的:“就前端来讲,两个用处吧:前端性能优化必须掌握,排障必须掌握

感觉这篇文章内容实在少了点。所以又补充了点内容,贴上几条最靠谱的 HTTP 学习资料希望能够帮到一些想深入学习 HTTP 童鞋~

记住文章开头所讲的,只去源头的知识学习才能保证学习的效率和准确性~祝我们能够更快更好的学习技术知识。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,736评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,167评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,442评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,902评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,302评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,573评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,847评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,562评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,260评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,367评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,016评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2 269

推荐阅读更多精彩内容