前端面试题之HTTP专题

本篇记录一些我秋招以来遇到的前端HTTP相关的的问题，因为不想只记住一些死答案，所以这里来梳理下整个的知识框架～

前提背景：

日常开发中，我们经常会使用到 cookie、浏览器的缓存机制、各种形式的网络连接（比如 Websocket），这些网络请求相关的场景都跟 HTTP 协议有密切的关系。

使用HTTP的场景：当服务端建立起与客户端的 TCP 连接之后，服务端会持续监听客户端发起的请求。接下来，客户端将发起 HTTP 请求，请求内容通常包括请求方法、请求的资源等，服务端收到请求后会进行回复，回复内容通常包括 HTTP 状态、响应消息等。可以看到，网络请求的过程包括两个步骤：客户端发送请求，服务器返回响应。这就是HTTP 协议的主要特点：遵循经典的“客户端-服务端”模型。

目录

前提背景：

1.HTTP基础知识：

HTTP 的基本概念

HTTP工作原理

HTTP请求/响应的步骤

HTTP 的 5 种方法

GET与POST的区别

HTTP报文的组成成分

2.HTTPS的诞生：

https 的基本概念

http 和 https 的区别？

HTTPS具体步骤：

https 协议的优缺点：

3.最全HTTP状态码：

4.Websocket:

与HTTP的区别：

利用Socket建立网络连接的步骤

---

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:

1. GET /sample.Jsp HTTP/1.1  //请求行

2. Host:  www.uuid.online/ //请求的目标域名和端口号

3. Origin: http://localhost:8081/ //请求的来源域名和端口号 （跨域请求时，浏览器会自动带上这个头信息）

4. Referer: https://localhost:8081/link?query=xxxxx //请求资源的完整URI

5. 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 //浏览器信息

6. Cookie:  BAIDUID=FA89F036:FG=1; BD_HOME=1; sugstore=0  //当前域名下的Cookie

7. Accept: text/html,image/apng  //代表客户端希望接受的数据类型是html或者是png图片类型 

8. Accept-Encoding: gzip, deflate  //代表客户端能支持gzip和deflate格式的压缩

9. Accept-Language: zh-CN,zh;q=0.9  //代表客户端可以支持语言zh-CN或者zh(值得一提的是q(0~1)是优先级权重的意思，不写默认为1，这里zh-CN是1，zh是0.9)

10. Connection: keep-alive  //告诉服务器，客户端需要的tcp连接是一个长连接

Response Header:

1. HTTP/1.1 200 OK  // 响应状态行

2. Date:  Mon, 30 Jul 2018 02:50:55 GMT  //服务端发送资源时的服务器时间

3. Expires:  Wed, 31 Dec 1969 23:59:59 GMT //比较过时的一种验证缓存的方式，与浏览器（客户端）的时间比较，超过这个时间就不用缓存（不和服务器进行验证），适合版本比较稳定的网页

4. Cache-Control:  no-cache  // 现在最多使用的控制缓存的方式，会和服务器进行缓存验证，具体见博文”Cache-Control“

5. etag:  "fb8ba2f80b1d324bb997cbe188f28187-ssl-df"  // 一般是Nginx静态服务器发来的静态文件签名，浏览在没有“Disabled cache”情况下，接收到etag后，同一个url第二次请求就会自动带上“If-None-Match”

6. Last-Modified:  Fri, 27 Jul 2018 11:04:55 GMT //是服务器发来的当前资源最后一次修改的时间，下次请求时，如果服务器上当前资源的修改时间大于这个时间，就返回新的资源内容

7. Content-Type:  text/html; charset=utf-8  //如果返回是流式的数据，我们就必须告诉浏览器这个头，不然浏览器会下载这个页面，同时告诉浏览器是utf8编码，否则可能出现乱码

8. Content-Encoding:  gzip  //告诉客户端，应该采用gzip对资源进行解码

9. 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 服务器通信时有以下几个步骤：

1. 客户端使用 https url 访问服务器，则要求 web 服务器建立 ssl 链接。

2. web 服务器接收到客户端的请求之后，会将网站的证书（证书中包含了公钥），传输给客户端。

3. 客户端和 web 服务器端开始协商 SSL 链接的安全等级，也就是加密等级。

4. 客户端浏览器通过双方协商一致的安全等级，建立会话密钥，然后通过网站的公钥来加密会话密钥，并传送给网站。

5. web 服务器通过自己的私钥解密出会话密钥。

6. 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、连接确认：当服务器端套接字监听到或者说接收到客户端套接字的连接请求时，就响应客户端套接字的请求，建立一个新的线程，把服务器端套接字的描述发给客户端，一旦客户端确认了此描述，双方就正式建立连接。

而服务器端套接字继续处于监听状态，继续接收其他客户端套接字的连接请求。