本篇记录一些我秋招以来遇到的前端HTTP相关的的问题,因为不想只记住一些死答案,所以这里来梳理下整个的知识框架~
前提背景:
日常开发中,我们经常会使用到 cookie、浏览器的缓存机制、各种形式的网络连接(比如 Websocket),这些网络请求相关的场景都跟 HTTP 协议有密切的关系。
使用HTTP的场景:当服务端建立起与客户端的 TCP 连接之后,服务端会持续监听客户端发起的请求。接下来,客户端将发起 HTTP 请求,请求内容通常包括请求方法、请求的资源等,服务端收到请求后会进行回复,回复内容通常包括 HTTP 状态、响应消息等。可以看到,网络请求的过程包括两个步骤:客户端发送请求,服务器返回响应。这就是HTTP 协议的主要特点:遵循经典的“客户端-服务端”模型。
目录
1.HTTP基础知识:
HTTP 的基本概念
http: 是互联网上应用最为广泛的一种网络协议,是一个客户端和服务器端请求和应答的标准(TCP)
,用于从 WWW 服务器传输超文本到本地浏览器的超文本传输协议
。
HTTP工作原理
HTTP协议定义Web客户端如何从Web服务器请求Web页面,以及服务器如何把Web页面传送给客户端。客户端向服务器发送一个请求报文,服务器以一个状态行作为响应。
HTTP请求/响应的步骤
-
1.客户端连接到Web服务器
-
2.发送HTTP请求
-
3.服务器接受请求并返回HTTP响应
-
4.释放TCP连接
-
5.客户端(浏览器)解析HTML内容
记忆口诀:连接发送加响应,释放解析整过程。
HTTP 的 5 种方法
-
GET---获取资源
-
POST---传输资源
-
PUT---更新资源
-
DELETE---删除资源
-
HEAD---获取报文首部
GET与POST的区别
1.浏览器回退表现不同 GET在浏览器回退时是无害的,而POST会再次提交请求 2.浏览器对请求地址的处理不同 GET请求地址会被浏览器主动缓存,而POST不会,除非手动设置 3.浏览器对响应的处理不同GET请求参数会被完整的保留在浏览器历史记录里,而POST中的参数不会被保留 4.参数大小不同. GET请求在URL中传送的参数是有长度的限制,而POST没有限制 5.安全性不同. GET参数通过URL传递,会暴露,不安全;POST放在Request Body中,相对更安全 6.针对数据操作的类型不同.GET对数据进行查询,POST主要对数据进行增删改!简单说,GET是只读,POST是写。
HTTP报文的组成成分
请求报文{ 请求行、请求头、空行、请求体 } 请求行:{http方法、页面地址、http协议、http版本} 响应报文{ 状态行、响应头、空行、响应体 }
Request Header:
-
GET /sample.Jsp HTTP/1.1 //请求行
-
Host: www.uuid.online/ //请求的目标域名和端口号
-
Origin: http://localhost:8081/ //请求的来源域名和端口号 (跨域请求时,浏览器会自动带上这个头信息)
-
Referer: https://localhost:8081/link?query=xxxxx //请求资源的完整URI
-
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36 //浏览器信息
-
Cookie: BAIDUID=FA89F036:FG=1; BD_HOME=1; sugstore=0 //当前域名下的Cookie
-
Accept: text/html,image/apng //代表客户端希望接受的数据类型是html或者是png图片类型
-
Accept-Encoding: gzip, deflate //代表客户端能支持gzip和deflate格式的压缩
-
Accept-Language: zh-CN,zh;q=0.9 //代表客户端可以支持语言zh-CN或者zh(值得一提的是q(0~1)是优先级权重的意思,不写默认为1,这里zh-CN是1,zh是0.9)
-
Connection: keep-alive //告诉服务器,客户端需要的tcp连接是一个长连接
Response Header:
-
HTTP/1.1 200 OK // 响应状态行
-
Date: Mon, 30 Jul 2018 02:50:55 GMT //服务端发送资源时的服务器时间
-
Expires: Wed, 31 Dec 1969 23:59:59 GMT //比较过时的一种验证缓存的方式,与浏览器(客户端)的时间比较,超过这个时间就不用缓存(不和服务器进行验证),适合版本比较稳定的网页
-
Cache-Control: no-cache // 现在最多使用的控制缓存的方式,会和服务器进行缓存验证,具体见博文”Cache-Control“
-
etag: "fb8ba2f80b1d324bb997cbe188f28187-ssl-df" // 一般是Nginx静态服务器发来的静态文件签名,浏览在没有“Disabled cache”情况下,接收到etag后,同一个url第二次请求就会自动带上“If-None-Match”
-
Last-Modified: Fri, 27 Jul 2018 11:04:55 GMT //是服务器发来的当前资源最后一次修改的时间,下次请求时,如果服务器上当前资源的修改时间大于这个时间,就返回新的资源内容
-
Content-Type: text/html; charset=utf-8 //如果返回是流式的数据,我们就必须告诉浏览器这个头,不然浏览器会下载这个页面,同时告诉浏览器是utf8编码,否则可能出现乱码
-
Content-Encoding: gzip //告诉客户端,应该采用gzip对资源进行解码
-
Connection: keep-alive //告诉客户端服务器的tcp连接也是一个长连接
2.HTTPS的诞生:
主要:为了安全,但是HTTPS 的诞生就是为了解决中间人攻击的问题,但如今 HTTPS 的使用情况在国内并不乐观,基本是因为成本或者性能的考量。某鹅某浪的部分登录页面采用非对称加密对密码加密。这些站点目前都还是使用 http 协议【会用一些加密算法来保证安全】。
https 的基本概念
https:是以安全为目标的 HTTP 通道,即 HTTP 下 加入 SSL 层进行加密。
https 协议的作用:建立一个信息安全通道,来确保数据的传输,确保网站的真实性。
http 和 https 的区别?
-
http 是超文本传输协议,信息是明文传输,https 则是具有安全性的 ssl 加密传输协议。
-
Https 协议需要 ca 证书,费用较高。
-
使用不同的链接方式,端口也不同,一般,http 协议的端口为 80,https 的端口为 443。
-
http 的连接很简单,是无状态的。
HTTPS具体步骤:
客户端在使用 HTTPS 方式与 Web 服务器通信时有以下几个步骤:
-
客户端使用 https url 访问服务器,则要求 web 服务器
建立 ssl 链接
。 -
web 服务器接收到客户端的请求之后,会
将网站的证书(证书中包含了公钥),传输给客户端
。 -
客户端和 web 服务器端开始
协商 SSL 链接的安全等级
,也就是加密等级。 -
客户端浏览器通过双方协商一致的安全等级,
建立会话密钥
,然后通过网站的公钥来加密会话密钥,并传送给网站。 -
web 服务器
通过自己的私钥解密出会话密钥
。 -
web 服务器
通过会话密钥加密与客户端之间的通信
。
https 协议的优缺点:
-
HTTPS 协议要比 http 协议
安全
,可防止数据在传输过程中被窃取、改变,确保数据的完整性。 -
https 握手阶段比较
费时
,会使页面加载时间延长 50%,增加 10%~20%的耗电。 -
https
缓存
不如 http 高效,会增加数据开销。 -
SSL 证书也需要钱,功能越强大的
证书费
用越高。 -
SSL 证书需要绑定
IP
,不能再同一个 ip 上绑定多个域名,ipv4 资源支持不了这种消耗。
3.最全HTTP状态码:
HTTP状态码
-
1xx:指示信息类,表示请求已接受,继续处理
-
2xx:指示成功类,表示请求已成功接受
-
3xx:指示重定向,表示要完成请求必须进行更近一步的操作
-
4xx:指示客户端错误,请求有语法错误或请求无法实现
-
5xx:指示服务器错误,服务器未能实现合法的请求
常见状态码
-
200 OK:客户端请求成功
-
301 Moved Permanently:所请求的页面已经永久重定向至新的URL
-
302 Found:所请求的页面已经临时重定向至新的URL
-
304 Not Modified 未修改。
-
403 Forbidden:对请求页面的访问被禁止
-
404 Not Found:请求资源不存在
-
500 Internal Server Error:服务器发生不可预期的错误原来缓冲的文档还可以继续使用
-
503 Server Unavailable:请求未完成,服务器临时过载或宕机,一段时间后可恢复正常
-
1xx(临时响应)表示临时响应并需要请求者继续执行操作的状态码
-
100 - 继续 请求者应当继续提出请求。服务器返回此代码表示已收到请求的第一部分,正在等待其余部分
-
101 - 切换协议 请求者已要求服务器切换协议,服务器已确认并准备切换
-
-
2xx(成功)表示成功处理了请求的状态码
-
200
- 成功 服务器已经成功处理了请求。通常,这表示服务器提供了请求的网页 -
201 - 已创建 请求成功并且服务器创建了新的资源
-
202 - 已接受 服务器已接受请求,但尚未处理
-
203 - 非授权信息 服务器已经成功处理了请求,但返回的信息可能来自另一来源
-
204 - 无内容 服务器成功处理了请求,但没有返回任何内容
-
205 - 重置内容 服务器成功处理了请求,但没有返回任何内容
-
-
3xx(重定向)表示要完成请求,需要进一步操作;通常,这些状态代码用来重定向
-
300 - 多种选择 针对请求,服务器可执行多种操作。服务器可根据请求者(user agent)选择一项操作,或提供操作列表供请求者选择
-
301
- 永久移动 请求的网页已永久移动到新位置。服务器返回此响应(对GET或HEAD请求的响应)时,会自动将请求者转到新位置 -
302
- 临时移动 服务器目前从不同位置的网页响应请求,但请求者应继续使用原有位置来进行以后的请求 -
303 - 查看其它位置 请求者应当对不同的位置使用单独的GET请求来检索响应时,服务器返回此代码
-
304
- 未修改 自上次请求后,请求的网页未修改过。服务器返回此响应,不会返回网页的内容 -
305 - 使用代理 请求者只能使用代理访问请求的网页。如果服务器返回此响应,还表示请求者应使用代理
-
307
- 临时性重定向 服务器目前从不同位置的网页响应请求,但请求者应继续使用原有的位置来进行以后的请求
-
-
4xx(请求错误)这些状态码表示请求可能出错,妨碍了服务器的处理
-
400
- 错误请求 服务器不理解请求的语法 -
401
- 未授权 请求要求身份验证。对于需要登录的网页,服务器可能返回此响应 -
403
- 禁止 服务器拒绝请求 -
404
- 未找到 服务器找不到请求的网页 -
405 - 方法禁用 禁用请求中指定的方法
-
406 - 不接受 无法使用请求的内容特性响应请求的网页
-
407
- 需要代理授权 此状态码与401(未授权)类似,但指定请求者应当授权使用代理 -
408
- 请求超时 服务器等候请求时发生超时 -
410 - 已删除 如果请求的资源已永久删除,服务器就会返回此响应
-
413
- 请求实体过大 服务器无法处理请求,因为请求实体过大,超出了服务器的处理能力 -
414
- 请求的URI过长 请求的URI(通常为网址)过长,服务器无法处理
-
-
5xx(服务器错误)这些状态码表示服务器在尝试处理请求时发生内部错误。这些错误可能是服务器本身的错误,而不是请求出错
-
500
- 服务器内部错误 服务器遇到错误,无法完成请求 -
501 - 尚未实施 服务器不具备完成请求的功能。例如,服务器无法识别请求方法时可能会返回此代码
-
502
- 错误网关 服务器作为网关或代理,从上游服务器无法收到无效响应 -
503
- 服务器不可用 服务器目前无法使用(由于超载或者停机维护)。通常,这只是暂时状态 -
504
- 网关超时 服务器作为网关代理,但是没有及时从上游服务器收到请求 -
505 - HTTP版本不受支持 服务器不支持请求中所用的HTTP协议版本
-
-
4.Websocket:
-
与HTTP的区别:
- 1、WebSocket是双向通信协议,模拟Socket协议,可以双向发送或接受信息,而HTTP是单向的;2、WebSocket是需要浏览器和服务器握手进行建立连接的,而http是浏览器发起向服务器的连接。
- websocket介绍:
-
实现原理: Websocket 实现了客户端与服务端的双向通信,只需要连接一次,就可以相互传输数据,很适合实时通讯、数据实时更新等场景。
Websocket 协议与 HTTP 协议没有关系,它是一个建立在 TCP 协议上的全新协议,为了兼容 HTTP 握手规范,在握手阶段依然使用 HTTP 协议,握手完成之后,数据通过 TCP 通道进行传输。
Websoket 数据传输是通过 frame 形式,一个消息可以分成几个片段传输。这样大数据可以分成一些小片段进行传输,不用考虑由于数据量大导致标志位不够的情况。也可以边生成数据边传递消息,提高传输效率。
优点: 双向通信。客户端和服务端双方 都可以主动发起通讯。 没有同源限制。客户端可以与任意服务端通信,不存在跨域问题。 数据量轻。第一次连接时需要携带请求头,后面数据通信都不需要带请求头,减少了请求头的负荷。 传输效率高。因为只需要一次连接,所以数据传输效率高。
缺点: 长连接需要后端处理业务的代码更稳定,推送消息相对复杂;\ 长连接受网络限制比较大,需要处理好重连。\ 兼容性,WebSocket 只支持 IE10 及其以上版本。\ 服务器长期维护长连接需要一定的成本,各个浏览器支持程度不一;\ 成熟的 HTTP 生态下有大量的组件可以复用,WebSocket 则没有,遇到异常问题难以快速定位快速解决。【需要后端代码稳定,受网络限制大,兼容性差,维护成本高,生态圈小】
利用Socket建立网络连接的步骤
建立Socket连接至少需要一对套接字,其中一个运行于客户端,称为ClientSocket ,另一个运行于服务器端,称为ServerSocket 。
套接字之间的连接过程分为三个步骤:服务器监听,客户端请求,连接确认。
1、服务器监听:服务器端套接字并不定位具体的客户端套接字,而是处于等待连接的状态,实时监控网络状态,等待客户端的连接请求。
2、客户端请求:指客户端的套接字提出连接请求,要连接的目标是服务器端的套接字。
为此,客户端的套接字必须首先描述它要连接的服务器的套接字,指出服务器端套接字的地址和端口号,然后就向服务器端套接字提出连接请求。
3、连接确认:当服务器端套接字监听到或者说接收到客户端套接字的连接请求时,就响应客户端套接字的请求,建立一个新的线程,把服务器端套接字的描述发给客户端,一旦客户端确认了此描述,双方就正式建立连接。
而服务器端套接字继续处于监听状态,继续接收其他客户端套接字的连接请求。