前端面试题之网络篇

最新推荐文章于 2024-07-04 23:25:38 发布
最新推荐文章于 2024-07-04 23:25:38 发布
阅读量2.3k 收藏 35
点赞数 4
分类专栏： 面试题 文章标签： http
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BIBIBIA/article/details/115975941
版权

文章目录

1.HTTP和HTPPS的区别：

2.HTTP简介

​ HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写,是用于从万维网（WWW:World Wide Web ）服务器传输超文本到本地浏览器的传送协议。。

​ HTTP是一个基于TCP/IP通信协议来传递数据（HTML 文件, 图片文件, 查询结果等）。

3.HTTP原理

​ HTTP协议工作于客户端-服务端架构上。浏览器作为HTTP客户端通过URL向HTTP服务端即WEB服务器发送所有请求。

​ Web服务器有：Apache服务器，IIS服务器（Internet Information Services）等。

​ Web服务器根据接收到的请求后，向客户端发送响应信息。

​ HTTP默认端口号为80，但是你也可以改为8080或者其他端口。

4.一次完整的HTTP请求所经历的7个步骤

HTTP通信机制是在一次完整的HTTP通信过程中，Web浏览器与Web服务器之间将完成下列7个步骤：

1. 建立TCP连接

在HTTP工作开始之前，Web浏览器首先要通过网络与Web服务器建立连接，该连接是通过TCP来完成的，该协议与IP协议共同构建 Internet，即著名的TCP/IP协议族，因此Internet又被称作是TCP/IP网络。HTTP是比TCP更高层次的应用层协议，根据规则， 只有低层协议建立之后才能，才能进行更层协议的连接，因此，首先要建立TCP连接，一般TCP连接的端口号是80。

2. Web浏览器向Web服务器发送请求行

一旦建立了TCP连接，Web浏览器就会向Web服务器发送请求命令。例如：GET /sample/hello.jsp HTTP/1.1。

3. Web浏览器发送请求头

浏览器发送其请求命令之后，还要以头信息的形式向Web服务器发送一些别的信息，之后浏览器发送了一空白行来通知服务器，它已经结束了该头信息的发送。

4. Web服务器应答

客户机向服务器发出请求后，服务器会客户机回送应答， HTTP/1.1 200 OK ，应答的第一部分是协议的版本号和应答状态码。

5. Web服务器发送应答头

正如客户端会随同请求发送关于自身的信息一样，服务器也会随同应答向用户发送关于它自己的数据及被请求的文档。

6. Web服务器向浏览器发送数据

Web服务器向浏览器发送头信息后，它会发送一个空白行来表示头信息的发送到此为结束，接着，它就以Content-Type应答头信息所描述的格式发送用户所请求的实际数据。

7. Web服务器关闭TCP连接

一般情况下，一旦Web服务器向浏览器发送了请求数据，它就要关闭TCP连接，然后如果浏览器或者服务器在其头信息加入了这行代码：

Connection:keep-alive

TCP连接在发送后将仍然保持打开状态，于是，浏览器可以继续通过相同的连接发送请求。保持连接节省了为每个请求建立新连接所需的时间，还节约了网络带宽。

建立TCP连接->发送请求行->发送请求头->（到达服务器）发送状态行->发送响应头->发送响应数据->断TCP连接

5.HTTP三点注意事项：

  • HTTP是无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。

  • HTTP是媒体独立的：这意味着，只要客户端和服务器知道如何处理的数据内容，任何类型的数据都可以通过HTTP发送。客户端以及服务器指定使用适合的MIME-type内容类型。

  • HTTP是无状态：HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。另一方面，在服务器不需要先前信息时它的应答就较快。

    cgiarch

6.HTTPS简介

​ 超文本传输安全协议（英语：Hypertext Transfer Protocol Secure，缩写：HTTPS，常称为HTTP over TLS，HTTP over SSL或HTTP Secure）是一种网络安全传输协议。具体介绍以前先来介绍一下以前常见的HTTP，HTTP就是我们平时浏览网页时候使用的一种协议。HTTP协议传输的数据都是未加密的，也就是明文，因此使用HTTP协议传输隐私信息非常不安全。HTTP使用80端口通讯，而HTTPS占用443端口通讯。在计算机网络上，HTTPS经由超文本传输协议（HTTP）进行通信，但利用SSL/TLS来加密数据包。HTTPS开发的主要目的，是提供对网络服务器的身份认证，保护交换数据的隐私与完整性。这个协议由网景公司（Netscape）在1994年首次提出，随后扩展到互联网上。

7. HTTPS 工作原理

img

1、客户端发起 HTTPS 请求

这个没什么好说的，就是用户在浏览器里输入一个 https 网址，然后连接到 server 的 443 端口。

2、服务端的配置

采用 HTTPS 协议的服务器必须要有一套数字证书，可以自己制作，也可以向组织申请，区别就是自己颁发的证书需要客户端验证通过，才可以继续访问，而使用受信任的公司申请的证书则不会弹出提示页面(startssl 就是个不错的选择，有 1 年的免费服务)。

这套证书其实就是一对公钥和私钥，如果对公钥和私钥不太理解，可以想象成一把钥匙和一个锁头，只是全世界只有你一个人有这把钥匙，你可以把锁头给别人，别人可以用这个锁把重要的东西锁起来，然后发给你，因为只有你一个人有这把钥匙，所以只有你才能看到被这把锁锁起来的东西。

3、传送证书

这个证书其实就是公钥，只是包含了很多信息，如证书的颁发机构，过期时间等等。

4、客户端解析证书

这部分工作是有客户端的TLS来完成的，首先会验证公钥是否有效，比如颁发机构，过期时间等等，如果发现异常，则会弹出一个警告框，提示证书存在问题。

如果证书没有问题，那么就生成一个随机值，然后用证书对该随机值进行加密，就好像上面说的，把随机值用锁头锁起来，这样除非有钥匙，不然看不到被锁住的内容。

5、传送加密信息

这部分传送的是用证书加密后的随机值，目的就是让服务端得到这个随机值，以后客户端和服务端的通信就可以通过这个随机值来进行加密解密了。

6、服务端解密信息

服务端用私钥解密后，得到了客户端传过来的随机值(私钥)，然后把内容通过该值进行对称加密，所谓对称加密就是，将信息和私钥通过某种算法混合在一起，这样除非知道私钥，不然无法获取内容，而正好客户端和服务端都知道这个私钥，所以只要加密算法够彪悍，私钥够复杂，数据就够安全。

7、传输加密后的信息

这部分信息是服务段用私钥加密后的信息，可以在客户端被还原。

8、客户端解密信息

客户端用之前生成的私钥解密服务段传过来的信息，于是获取了解密后的内容，整个过程第三方即使监听到了数据，也束手无策。

这里浏览器与网站互相发送加密的握手消息并验证，目的是为了保证双方都获得了一致的密码，并且可以正常的加密解密数据，为后续真正数据的传输做一次测试。另外，HTTPS一般使用的加密与HASH算法如下：

  • 非对称加密算法：RSA，DSA/DSS

  • 对称加密算法：AES，RC4，3DES

    HTTPS对应的通信时序图如下：

    img

8.HTTPS协议和HTTP协议的区别：

  • HTTP 明文传输，数据都是未加密的，安全性较差，HTTPS（SSL+HTTP） 数据传输过程是加密的，安全性较好。
  • 使用 HTTPS 协议需要到 CA（Certificate Authority，数字证书认证机构） 申请证书，一般免费证书较少，因而需要一定费用。证书颁发机构如：Symantec、Comodo、GoDaddy 和 GlobalSign 等。
  • HTTP 页面响应速度比 HTTPS 快，主要是因为 HTTP 使用 TCP 三次握手建立连接，客户端和服务器需要交换 3 个包，而 HTTPS除了 TCP 的三个包，还要加上 ssl 握手需要的 9 个包，所以一共是 12 个包。
  • http 和 https 使用的是完全不同的连接方式，用的端口也不一样，前者是 80，后者是 443。
  • HTTPS 其实就是建构在 SSL/TLS 之上的 HTTP 协议，所以，要比较 HTTPS 比 HTTP 要更耗费服务器资源。

9.TCP三次握手和四次挥手

img

  • 第一次握手：客户端尝试连接服务器，向服务器发送 syn 包（同步序列编号Synchronize Sequence Numbers），syn=j，客户端进入 SYN_SEND 状态等待服务器确认
  • 第二次握手：服务器接收客户端syn包并确认（ack=j+1），同时向客户端发送一个 SYN包（syn=k），即 SYN+ACK 包，此时服务器进入 SYN_RECV 状态
  • 第三次握手：第三次握手：客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK(ack=k+1），此包发送完毕，客户端和服务器进入ESTABLISHED状态，完成三次握手

为什么要进行第三次握手？

为了防止服务器端开启一些无用的连接增加服务器开销以及防止已失效的连接请求报文段突然又传送到了服务端，因而产生错误。

由于网络传输是有延时的(要通过网络光纤和各种中间代理服务器)，在传输的过程中，比如客户端发起了SYN=1创建连接的请求(第一次握手)。

如果服务器端就直接创建了这个连接并返回包含SYN、ACK和Seq等内容的数据包给客户端，这个数据包因为网络传输的原因丢失了，丢失之后客户端就一直没有接收到服务器返回的数据包。

客户端可能设置了一个超时时间，时间到了就关闭了连接创建的请求。再重新发出创建连接的请求，而服务器端是不知道的，如果没有第三次握手告诉服务器端客户端收的到服务器端传输的数据的话，

服务器端是不知道客户端有没有接收到服务器端返回的信息的。

这个过程可理解为：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3wXuodij-1619012145567)(https://pics3.baidu.com/feed/1c950a7b02087bf4cf316c92aa0daf2913dfcfd4.jpeg?token=7e26ac525676d063251da3d6bf395e8a&s=3172483221D25DCA14F115DA0300E0B0)]

这样没有给服务器端一个创建还是关闭连接端口的请求，服务器端的端口就一直开着，等到客户端因超时重新发出请求时，服务器就会重新开启一个端口连接。那么服务器端上没有接收到请求数据的上一个端口就一直开着，长此以往，这样的端口多了，就会造成服务器端开销的严重浪费。

还有一种情况是已经失效的客户端发出的请求信息，由于某种原因传输到了服务器端，服务器端以为是客户端发出的有效请求，接收后产生错误。

所以我们需要“第三次握手”来确认这个过程，让客户端和服务器端能够及时地察觉到因为网络等一些问题导致的连接创建失败，这样服务器端的端口就可以关闭了不用一直等待。

也可以这样理解：“第三次握手”是客户端向服务器端发送数据，这个数据就是要告诉服务器，客户端有没有收到服务器“第二次握手”时传过去的数据。若发送的这个数据是“收到了”的信息，接收后服务器就正常建立TCP连接，否则建立TCP连接失败，服务器关闭连接端口。由此减少服务器开销和接收到失效请求发生的错误。

抓包验证

下面是用抓包工具抓到的一些数据包，可用来分析TCP的三次握手：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P7LeRCaG-1619012145568)(https://pics7.baidu.com/feed/ca1349540923dd54b004ffbc86d74bdb9e8248d7.jpeg?token=d79c25e5a05e3b9b583e576d0d39d3fb)]

图中显示的就是完整的TCP连接的”三次握手”过程。在52528 -> 80中，52528是本地(客户端)端口，80是服务器的端口。80端口和52528端口之间的三次来回就是"三次握手"过程。

注意到”第一次握手”客户端发送的TCP报文中以[SYN]作为标志位，并且客户端序号Seq=0；

接下来”第二次握手”服务器返回的TCP报文中以[SYN，ACK]作为标志位；并且服务器端序号Seq=0；确认号Ack=1(“第一次握手”中客户端序号Seq的值+1);

最后”第三次握手”客户端再向服务器端发送的TCP报文中以[ACK]作为标志位；

其中客户端序号Seq=1（“第二次握手”中服务器端确认号Ack的值）；确认号Ack=1(“第二次握手”中服务器端序号Seq的值+1)。

这就完成了”三次握手”的过程，符合前面分析的结果。

TCP的四次挥手

1、前言

对于"三次握手"我们耳熟能详，因为其相对的简单。但是，我们却不常听见“四次挥手”，就算听过也未必能详细地说明白它的具体过程。下面就为大家详尽，直观，完整地介绍“四次挥手”的过程。

2、“四次挥手”的详解

所谓的四次挥手即TCP连接的释放(解除)。连接的释放必须是一方主动释放，另一方被动释放。以下为客户端主动发起释放连接的图解：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VQFzzeU5-1619012145569)(https://pics5.baidu.com/feed/48540923dd54564e5260495ce0006487d0584fb6.jpeg?token=c3a743af38e25ff66deb6a07891be58e&s=C584FC1A71CFF4EE1A75A45203007073)]

挥手之前主动释放连接的客户端结束ESTABLISHED阶段。随后开始“四次挥手”：

通俗点来说就是：

​ 1.客户端想要释放连接，向服务器发送报文，请求释放

​ 2.服务器收到报文，返回一段报文，说接收到你的请求

​ 3.这时关闭了客户端到服务端的连接

​ 4.服务器再次发送报文，表示已经准备好关闭连接了

​ 5.客户端接收到，在向服务端说一下，我也准备好了

​ 6.这时关闭了服务器到客户端的连接

（1）首先客户端想要释放连接，向服务器端发送一段TCP报文，其中：

标记位为FIN，表示“请求释放连接“；序号为Seq=U；随后客户端进入FIN-WAIT-1阶段，即半关闭阶段。并且停止在客户端到服务器端方向上发送数据，但是客户端仍然能接收从服务器端传输过来的数据。注意：这里不发送的是正常连接时传输的数据(非确认报文)，而不是一切数据，所以客户端仍然能发送ACK确认报文。

（2）服务器端接收到从客户端发出的TCP报文之后，确认了客户端想要释放连接，随后服务器端结束ESTABLISHED阶段，进入CLOSE-WAIT阶段（半关闭状态）并返回一段TCP报文，其中：

标记位为ACK，表示“接收到客户端发送的释放连接的请求”；序号为Seq=V；确认号为Ack=U+1，表示是在收到客户端报文的基础上，将其序号Seq值加1作为本段报文确认号Ack的值；随后服务器端开始准备释放服务器端到客户端方向上的连接。客户端收到从服务器端发出的TCP报文之后，确认了服务器收到了客户端发出的释放连接请求，随后客户端结束FIN-WAIT-1阶段，进入FIN-WAIT-2阶段

前"两次挥手"既让服务器端知道了客户端想要释放连接，也让客户端知道了服务器端了解了自己想要释放连接的请求。于是，可以确认关闭客户端到服务器端方向上的连接了

（3）服务器端自从发出ACK确认报文之后，经过CLOSED-WAIT阶段，做好了释放服务器端到客户端方向上的连接准备，再次向客户端发出一段TCP报文，其中：

标记位为FIN，ACK，表示“已经准备好释放连接了”。注意：这里的ACK并不是确认收到服务器端报文的确认报文。序号为Seq=W；确认号为Ack=U+1；表示是在收到客户端报文的基础上，将其序号Seq值加1作为本段报文确认号Ack的值。随后服务器端结束CLOSE-WAIT阶段，进入LAST-ACK阶段。并且停止在服务器端到客户端的方向上发送数据，但是服务器端仍然能够接收从客户端传输过来的数据。

（4）客户端收到从服务器端发出的TCP报文，确认了服务器端已做好释放连接的准备，结束FIN-WAIT-2阶段，进入TIME-WAIT阶段，并向服务器端发送一段报文，其中：

标记位为ACK，表示“接收到服务器准备好释放连接的信号”。序号为Seq=U+1；表示是在收到了服务器端报文的基础上，将其确认号Ack值作为本段报文序号的值。确认号为Ack=W+1；表示是在收到了服务器端报文的基础上，将其序号Seq值作为本段报文确认号的值。随后客户端开始在TIME-WAIT阶段等待2MSL

为什么要客户端要等待2MSL呢？见后文。

服务器端收到从客户端发出的TCP报文之后结束LAST-ACK阶段，进入CLOSED阶段。由此正式确认关闭服务器端到客户端方向上的连接。

客户端等待完2MSL之后，结束TIME-WAIT阶段，进入CLOSED阶段，由此完成“四次挥手”。

后“两次挥手”既让客户端知道了服务器端准备好释放连接了，也让服务器端知道了客户端了解了自己准备好释放连接了。于是，可以确认关闭服务器端到客户端方向上的连接了，由此完成“四次挥手”。

与“三次挥手”一样，在客户端与服务器端传输的TCP报文中，双方的确认号Ack和序号Seq的值，都是在彼此Ack和Seq值的基础上进行计算的，这样做保证了TCP报文传输的连贯性，一旦出现某一方发出的TCP报文丢失，便无法继续"挥手"，以此确保了"四次挥手"的顺利完成。

3、“四次挥手”的通俗理解

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-omyD9NOr-1619012145569)(https://pics3.baidu.com/feed/caef76094b36acaf042ba27e2f07751503e99c48.jpeg?token=82e7f4e96e77dc4f3a6b5d9d1e36af2c&s=C150C53249BAC4CA586931D6030050B2)]

举个栗子：把客户端比作男孩，服务器比作女孩。通过他们的分手来说明“四次挥手”过程。

“第一次挥手”：日久见人心，男孩发现女孩变成了自己讨厌的样子，忍无可忍，于是决定分手，随即写了一封信告诉女孩。“第二次挥手”：女孩收到信之后，知道了男孩要和自己分手，怒火中烧，心中暗骂：你算什么东西，当初你可不是这个样子的！于是立马给男孩写了一封回信：分手就分手，给我点时间，我要把你的东西整理好，全部还给你！男孩收到女孩的第一封信之后，明白了女孩知道自己要和她分手。随后等待女孩把自己的东西收拾好。“第三次挥手”：过了几天，女孩把男孩送的东西都整理好了，于是再次写信给男孩：你的东西我整理好了，快把它们拿走，从此你我恩断义绝！“第四次挥手”：男孩收到女孩第二封信之后，知道了女孩收拾好东西了，可以正式分手了，于是再次写信告诉女孩：我知道了，这就去拿回来！这里双方都有各自的坚持。女孩自发出第二封信开始，限定一天内收不到男孩回信，就会再发一封信催促男孩来取东西！男孩自发出第二封信开始，限定两天内没有再次收到女孩的信就认为，女孩收到了自己的第二封信；若两天内再次收到女孩的来信，就认为自己的第二封信女孩没收到，需要再写一封信，再等两天……

倘若双方信都能正常收到，最少只用四封信就能彻底分手！这就是“四次挥手”。

4.为什么“握手”是三次，“挥手”却要四次？

​ 答：因为当Server端收到Client端的SYN连接请求报文后，可以直接发送SYN+ACK报文。其中ACK报文是用来应答的，SYN报文是用来同步的。但是关闭连接时，当Server端收到FIN报文时，很可能并不会立即关闭SOCKET，所以只能先回复一个ACK报文，告诉Client端，“你发的FIN报文我收到了”。只有等到我Server端所有的报文都发送完了，我才能发送FIN报文，因此不能一起发送。故需要四步握手。

10.在浏览器输入网址的过程发生了什么？

​ 输入url后，首先需要找到这个url域名的服务器ip,为了寻找这个ip，浏览器首先会寻找缓存，查看缓存中是否有记录，缓存的查找记录为：浏览器缓存-》系统缓存-》路由器缓存，缓存中没有则查找系统的hosts文件中是否有记录，如果没有则查询DNS服务器，得到服务器的ip地址后，浏览器根据这个ip以及相应的端口号，构造一个http请求，这个请求报文会包括这次请求的信息，主要是请求方法，请求说明和请求附带的数据，并将这个http请求封装在一个tcp包中，这个tcp包会依次经过传输层，网络层，数据链路层，物理层到达服务器，服务器解析这个请求来作出响应，返回相应的html给浏览器，因为html是一个树形结构，浏览器根据这个html来构建DOM树，在dom树的构建过程中如果遇到JS脚本和外部JS连接，则会停止构建DOM树来执行和下载相应的代码，这会造成阻塞，这就是为什么推荐JS代码应该放在html代码的后面，之后根据外部央视，内部央视，内联样式构建一个CSS对象模型树CSSOM树，构建完成后和DOM树合并为渲染树，这里主要做的是排除非视觉节点，比如script，meta标签和排除display为none的节点，之后进行布局，布局主要是确定各个元素的位置和尺寸，之后是渲染页面，因为html文件中会含有图片，视频，音频等资源，在解析DOM的过程中，遇到这些都会进行并行下载，浏览器对每个域的并行下载数量有一定的限制，一般是4-6个，当然在这些所有的请求中我们还需要关注的就是缓存，缓存一般通过Cache-Control、Last-Modify、Expires等首部字段控制。 Cache-Control和Expires的区别在于Cache-Control使用相对时间，Expires使用的是基于服务器 端的绝对时间，因为存在时差问题，一般采用Cache-Control，在请求这些有设置了缓存的数据时，会先 查看是否过期，如果没有过期则直接使用本地缓存，过期则请求并在服务器校验文件是否修改，如果上一次 响应设置了ETag值会在这次请求的时候作为If-None-Match的值交给服务器校验，如果一致，继续校验 Last-Modified，没有设置ETag则直接验证Last-Modified，再决定是否返回304

11.GET和POST的区别

  1. get参数通过url传递，post放在request body中。
  2. get请求在url中传递的参数是有长度限制的，而post没有。
  3. get比post更不安全，因为参数直接暴露在url中，所以不能用来传递敏感信息。
  4. get请求只能进行url编码，而post支持多种编码方式
  5. get请求会浏览器主动cache，而post支持多种编码方式。
  6. get请求参数会被完整保留在浏览历史记录里，而post中的参数不会被保留。
  7. GET和POST本质上就是TCP链接，并无差别。但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。
  8. GET产生一个TCP数据包；POST产生两个TCP数据包。

12.TCP和UDP的区别

（1）TCP是面向连接的，udp是无连接的即发送数据前不需要先建立链接。

（2）TCP提供可靠的服务。也就是说，通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达;UDP尽最大努力交付，即不保证可靠交付。 并且因为tcp可靠，面向连接，不会丢失数据因此适合大数据量的交换。

（3）TCP是面向字节流，UDP面向报文，并且网络出现拥塞不会使得发送速率降低（因此会出现丢包，对实时的应用比如IP电话和视频会议等）。

（4）TCP只能是1对1的，UDP支持1对1,1对多。

（5）TCP的首部较大为20字节，而UDP只有8字节。

（6）TCP是面向连接的可靠性传输，而UDP是不可靠的。

13.状态码以及比较

分类分类描述
1**信息，服务器收到请求，需要请求者继续执行操作
2**成功，操作被成功接收并处理
3**重定向，需要进一步的操作以完成请求
4**客户端错误，请求包含语法错误或无法完成请求
5**服务器错误，服务器在处理请求的过程中发生了错误
状态码状态码英文名称中文描述
100Continue继续。客户端应继续其请求
101Switching Protocols切换协议。服务器根据客户端的请求切换协议。只能切换到更高级的协议，例如，切换到HTTP的新版本协议
200OK请求成功。一般用于GET与POST请求
201Created已创建。成功请求并创建了新的资源
202Accepted已接受。已经接受请求，但未处理完成
203Non-Authoritative Information非授权信息。请求成功。但返回的meta信息不在原始的服务器，而是一个副本
204No Content无内容。服务器成功处理，但未返回内容。在未更新网页的情况下，可确保浏览器继续显示当前文档
205Reset Content重置内容。服务器处理成功，用户终端（例如：浏览器）应重置文档视图。可通过此返回码清除浏览器的表单域
206Partial Content部分内容。服务器成功处理了部分GET请求
300Multiple Choices多种选择。请求的资源可包括多个位置，相应可返回一个资源特征与地址的列表用于用户终端（例如：浏览器）选择
301Moved Permanently永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替
302Found临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI
303See Other查看其它地址。与301类似。使用GET和POST请求查看
304Not Modified未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源
305Use Proxy使用代理。所请求的资源必须通过代理访问
306Unused已经被废弃的HTTP状态码
307Temporary Redirect临时重定向。与302类似。使用GET请求重定向
400Bad Request客户端请求的语法错误，服务器无法理解
401Unauthorized请求要求用户的身份认证
402Payment Required保留，将来使用
403Forbidden服务器理解请求客户端的请求，但是拒绝执行此请求
404Not Found服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面
405Method Not Allowed客户端请求中的方法被禁止
406Not Acceptable服务器无法根据客户端请求的内容特性完成请求
407Proxy Authentication Required请求要求代理的身份认证，与401类似，但请求者应当使用代理进行授权
408Request Time-out服务器等待客户端发送的请求时间过长，超时
409Conflict服务器完成客户端的 PUT 请求时可能返回此代码，服务器处理请求时发生了冲突
410Gone客户端请求的资源已经不存在。410不同于404，如果资源以前有现在被永久删除了可使用410代码，网站设计人员可通过301代码指定资源的新位置
411Length Required服务器无法处理客户端发送的不带Content-Length的请求信息
412Precondition Failed客户端请求信息的先决条件错误
413Request Entity Too Large由于请求的实体过大，服务器无法处理，因此拒绝请求。为防止客户端的连续请求，服务器可能会关闭连接。如果只是服务器暂时无法处理，则会包含一个Retry-After的响应信息
414Request-URI Too Large请求的URI过长（URI通常为网址），服务器无法处理
415Unsupported Media Type服务器无法处理请求附带的媒体格式
416Requested range not satisfiable客户端请求的范围无效
417Expectation Failed服务器无法满足Expect的请求头信息
500Internal Server Error服务器内部错误，无法完成请求
501Not Implemented服务器不支持请求的功能，无法完成请求
502Bad Gateway作为网关或者代理工作的服务器尝试执行请求时，从远程服务器接收到了一个无效的响应
503Service Unavailable由于超载或系统维护，服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的Retry-After头信息中
504Gateway Time-out充当网关或代理的服务器，未及时从远端服务器获取请求
505HTTP Version not supported服务器不支持请求的HTTP协议的版本，无法完成处理

304

在浏览器第一次请求某一个URL时，服务器端的返回状态会是200，内容是客户端请求的资源，同时有一个Last-Modified的属性标记此文件在服务器端最后被修改的时间。

Last-Modified格式类似这样：

Last-Modified : Fri , 12 May 2006 18:53:33 GMT

客户端第二次请求此URL时，根据HTTP协议的规定，浏览器会向服务器传送If-Modified-Since报头，询问该时间之后文件是否有被修改过：

If-Modified-Since : Fri , 12 May 2006 18:53:33 GMT

如果服务器端的资源没有变化，则自动返回 HTTP 304（Not Changed.）状态码，内容为空，这样就节省了传输数据量。当服务器端代码发生改变或者重启服务器时，则重新发出资源，返回和第一次请求时类似。从而保证不向客户端重复发出资源，也保证当服务器有变化时，客户端能够得到最新的资源。

14.强缓存和协商缓存 和HTML5 应用程序缓存

缓存的优点：

  • 减少了不必要的数据传输，节省带宽
  • 减少服务器的负担，提升网站性能
  • 加快了客户端加载网页的速度
  • 用户体验友好

缺点：

  • 资源如果有更改但是客户端不及时更新会造成用户获取信息滞后，如果老版本有bug的话，情况会更加糟糕

缓存分为两种：强缓存和协商缓存，根据响应的header内容来决定。

获取资源形式状态码发送请求到服务器
强缓存从缓存取200（from cache）否，直接从缓存取
协商缓存从缓存取304（not modified）是，通过服务器来告知缓存是否可用

强缓存相关字段有expires，cache-control。如果cache-control与expires同时存在的话，cache-control的优先级高于expires。

协商缓存相关字段有Last-Modified/If-Modified-Since，Etag/If-None-Match

HTML5 应用程序缓存

<!DOCTYPE html>
<html manifest="/example/html5/demo_html.appcache">
<body>
<script type="text/javascript" src="/example/html5/demo_time.js">
</script>
<p id="timePara"><button onclick="getDateTime()">获得日期和事件</button></p>
<p><img src="/i/w3school_banner.gif" /></p>
<p>请打开<a href="/example/html5/html5_html_manifest.html" target="_blank">这个页面</a>，然后脱机浏览，重新加载页面。页面中的脚本和图像依然可用。</p>
</body>
</html>

15.CSRF和xss的网络攻击及防范

CSRF：跨站请求伪造，可以理解为攻击者盗用了用户的身份，以用户的名义发送了恶意请求，比如用户登录了一个网站后，立刻在另一个ｔａｂ页面访问量攻击者用来制造攻击的网站，这个网站要求访问刚刚登陆的网站，并发送了一个恶意请求，这时候CSRF就产生了，比如这个制造攻击的网站使用一张图片，但是这种图片的链接却是可以修改数据库的，这时候攻击者就可以以用户的名义操作这个数据库，
防御方式的话：
使用验证码，
检查https头部的refer，
使用token,
对用户输入进行过滤来阻止 XSS (en-US)；
任何敏感操作都需要确认；
用于敏感信息的 Cookie 只能拥有较短的生命周期；

XSS：跨站脚本攻击，是说攻击者通过注入恶意的脚本，在用户浏览网页的时候进行攻击，比如获取cookie，或者其他用户身份信息，可以分为存储型和反射型，存储型是攻击者输入一些数据并且存储到了数据库中，其他浏览者看到的时候进行攻击，反射型的话不存储在数据库中，往往表现为将攻击代码放在url地址的请求参数中，防御的话为cookie设置httpOnly属性，对用户的输入进行检查，进行特殊字符过滤

16.cookie，sessionStorage和localStorage的区别

cookie：

是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。通常，它用于告知服务端两个请求是否来自同一浏览器，如保持用户的登录状态。Cookie 使基于无状态的HTTP协议记录稳定的状态信息成为了可能。

Cookie 主要用于以下三个方面：
会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息）
个性化设置（如用户自定义设置、主题等）
浏览器行为跟踪（如跟踪分析用户行为等）

带上cookie值

fetch在默认情况下, 不管是同域还是跨域ajax请求都不会带上cookie, 
只有当设置了 credentials 时才会带上该ajax请求所在域的cookie, 
服务端需要设置响应头 Access-Control-Allow-Credentials: true, 
否则浏览器会因为安全限制而报错, 拿不到响应
fetch(url, {
credentials: "include", // include, same-origin, omit})

axios和jQuery在同域ajax请求时会带上cookie, 跨域请求不会,
跨域请求需要设置 withCredentials 和服务端响应头

axios.get('http://server.com', {withCredentials: true})

$.ajax({
method: 'get',
url: 'http://server.com',
xhrFields: {
    withCredentials: true
}})

storage

什么是 HTML 本地存储？
通过本地存储（Local Storage），web 应用程序能够在用户浏览器中对数据进行本地的存储。

在 HTML5 之前，应用程序数据只能存储在 cookie 中，包括每个服务器请求。本地存储则更安全，并且可在不影响网		站性能的前提下将大量数据存储于本地。

与 cookie（4k） 不同，存储限制要大得多（至少5MB），并且信息不会被传输到服务器。

本地存储经由起源地（origin）（经由域和协议）。所有页面，从起源地，能够存储和访问相同的数据。
然后又有localstorage永久保存和sessionstorage临时保存

17.跨域

1.jsonp 就是 json with padding的缩写 只支持get请求

原理：利用script的src属性来实现跨域。因为是用的src，所以只能get。
​

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function jsonp({url,params,cb}){
return new Promise((resolve,reject)=>{
let script = document.createElement('script');
window[cb]=function(data){
resolve(data);
document.body.removeChild(script);
}
params={...params,cb}//wd=b&cb=show
let arrs = [];
for(let key in params){
arrs.push(`${key}=${params[key]}`);
}
script.src = `${url}?${arrs.join('&')}`;
document.body.appendChild(script)
})
}
//只能发送get请求，不支持post put delete
//不安全xss攻击  不采用
jsonp({
url:'http://localhost:3000/say',
params:{wd:'早上好'},
cb:'show'
}).then(data=>{
console.log(data)
})
</script>
</body>
</html>
jquery版本
function get() {
 $.ajax({
type: "GET",
url: 'http://192.168.19.6:8080/jsgd/
bill.jsp?
userCode=?&date='+ new Date(), 
dataType:"jsonp",
jsonp:"jsonpcallback",
success: function(msg){
$('#callcenter').html(msg.text);
 }
});
}

2.CORS是Cross-Origin -Resource -Sharing的缩写。跨域资源共享是ajax跨域请求资源的方式

分为简单请求和复杂请求
简单请求是GET HEAD POST 是HTTP1.0
对于简单的请求，浏览器会直接发送cors请求，就是在header中加入origin请求头字段，带上要请求的源。
响应头返回的时候会有Access-Control-Allow-Origin：会带上要请求的源。
在这里插入图片描述
复杂请求
是PUT DELETE CONNECT OPTIONS TRACE PATCH
是HTTP1.1新增的
是复杂请求的时候，浏览器会自动先发送一个options请求，如果发现浏览器支持该请求的话，就会将真正的请求发送给后端，如果浏览器发现服务端不支持该请求，就会抛出错误。
cors字段介绍
Access-Control-Allow-Methods
这个字段表示服务器支持的所有跨域请求的方式。
Access-Control-Allow-Headers

如果浏览器请求包括这个字段，则这个字段也是必须的，它也是一个逗号分隔的字符串，表明服务器支持的所有头信息字段，不限于浏览器在“预检"中请求的字段
Access-Control-Max-Age
该字段可选，用来指定本次预检请求的有效期，单位为秒。上面结果中，有效期是20天（1728000秒），即允许缓存该条回应1728000秒（即20天），在此期间，不用发出另一条预检请求
index.js

let xhr = new XMLHttpRequest()
document.cookie = 'name=xiaoming'
xhr.withCredentials = true
xhr.open('PUT', 'http://localhost:4000/getData', true)
xhr.setRequestHeader('name', 'xiaoming')
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
console.log(xhr.response)
//得到响应头，后台需设置Access-Control
//-Expose-Headers
  console.log(xhr.
  getResponseHeader('name'))
    }
}
}
xhr.send()

server2.js

let express = require('express')
let app = express()
let whitList = ['http://localhost:3000']
app.use(function(req, res, next) {
let origin = req.headers.origin
if (whitList.includes(origin)) {
// 设置哪个源可以访问我
res.setHeader('Access-Control
-Allow-Origin', origin)
// 允许携带哪个头访问我
res.setHeader('Access-Control-Allow-Headers', 'name')
// 允许哪个方法访问我
res.setHeader('Access-Control-Allow-Methods', 'PUT')
// 允许携带cookie
res.setHeader('Access-Control-Allow-Credentials', true)
// 预检的存活时间
res.setHeader('Access-Control-Max-Age', 6)
// 允许返回的头
res.setHeader('Access-Control-Expose-Headers', 'name')
if (req.method === 'OPTIONS') {
res.end() // OPTIONS请求不做任何处理
}
}
next()
})
app.put('/getData', function(req, res) {
console.log(req.headers)
res.setHeader('name', 'ming') //返回一个响应头，后台需设置
res.end('早上好')
})
app.get('/getData', function(req, res) {
console.log(req.headers)
res.end('早上好')
})
app.use(express.static(__dirname))
app.listen(4000)

Cors与Jsonp比较

  1. cors比Jsonp更强大
  2. Jsonp只支持Get请求，cors支持所有类型的HTTP请求
  3. 使用cors，可以使用XMLHttpRequest发起请求和获取数据，比Jsonp有更好的错误处理
  4. Jsonp的优势在于支持老式浏览器和可以向cors的网络请求数据
  5. cors与Jsonp相比，更方便可靠

3.反向代理 就是呗 这个同源限制是浏览器的限制 不是服务器的限制

反向代理是利用代理服务器接收到请求之后，转发给真正的服务器，并把结果返回到浏览器上。

module.exports = 
{  devServer: {    
	proxy: {      '^/': 
	{       
	target: 'http://localhost:8082/' // api server     
  }    
  }  
  }
}

18.HTTP方法

HTTP1.0 定义了三种请求方法： GET, POST 和 HEAD 方法。

HTTP1.1 新增了六种请求方法：OPTIONS、PUT、PATCH、DELETE、TRACE 和 CONNECT 方法。

方法描述
GET请求指定的页面信息，并返回实体主体
POST向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST 请求可能会导致新的资源的建立和/或已有资源的修改。
HEADHEAD方法请求一个与GET请求的响应相同的响应，但没有响应体。
PUT从客户端向服务器传送的数据取代指定的文档的内容。
DELETE请求服务器删除指定的页面。
CONNECTHTTP/1.1 协议中预留给能够将连接改为管道方式的代理服务器。
OPTIONS允许客户端查看服务器的性能。
TRACE回显服务器收到的请求，主要用于测试或诊断。
PATCH是对 PUT 方法的补充，用来对已知资源进行局部更新 。
前端妹子
关注
  • 4
    点赞
  • 踩
  • 35
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
不容错过的前端面试题【网络篇】
weixin_62765236的博客
10-09 1345
不容错过的前端面试题【网络篇】
前端网络面试题
weixin_38292678的博客
09-25 1812
1、Http和Https的区别 Http协议运行在TCP之上，明文传输，客户端与服务器端都无法验证对方的身份；Https是身披SSL(Secure Socket Layer)外壳的Http，运行于SSL上，SSL运行于TCP之上，是添加了加密和认证机制的HTTP。二者之间存在如下不同： 端口不同：Http与Http使用不同的连接方式，用的端口也不一样，前者是80，后者是443； 资源消耗：和HT...
前端网络相关面试题
weixin_42060560的博客
03-10 335
http 一、介绍一下http，有什么特点 http是超文本传输协议(Hyper Text Transfer Protocol)，主要负责web server和浏览器之间的通讯；http协议是把客户端的请求发送到一个服务器，并把网页内容从服务器返回到客户端 特点： 简单快速：客户向服务器请求服务时，只需要发送请求方法和路径 灵活：http允许传输任意类型的数据对象，使用Content-Type标志 无连接：无连接是指限制每次只连接处理一个请求，服务器处理完客户的请求并收到客户的应答后，即断开连接 无状态：
前端面试题3-浅谈http协议及常见的面试题
最新发布
God's asylum的博客
07-04 521
答案1xx（信息性状态码）：表示接收的请求正在处理。2xx（成功状态码）：表示请求已成功被服务器接收、理解，并接受。200 OK：请求已成功处理。3xx（重定向状态码）：需要客户端采取进一步的操作才能完成请求。：请求的资源已永久移动到新位置。302 Found：临时重定向。4xx（客户端错误状态码）：请求包含语法错误或无法完成请求。：请求无效或无法理解。：请求要求用户的身份认证。：服务器无法找到请求的资源。5xx（服务器错误状态码）：服务器在处理请求的过程中发生了错误。
【前端面试题——网络协议】
zz130428的博客
03-29 896
为什么用 Virtual Dom用 JS 模拟 DOM 结构 ， 提高重绘性能。因为DOM操作是非常昂贵的，看似更复杂JS的virtual dom实则效率更高。VDOM 采用 Diff 算法用 JavaScript 对象结构表示 DOM 树的结构{tag, attrs, children}；用这个树构建一个真正的 DOM 树，插到文档当中当状态变更时，重新构造一棵新的对象树。用新的树和旧的树进行比较两个树的差异。把差异更新到久的树上，整个视图就更新了。Virtual DOM 本质。
前端网络部分面试题
baisixue19870221的博客
11-21 793
1.http状态码有那些？分别代表是什么意思？ 1**信息，服务器收到请求，需要请求者继续执行操作 2**成功，操作被成功接收并处理 3**重定向，需要进一步的操作以完成请求 4**客户端错误，请求包含语法错误或无法完成请求 5**服务器错误，服务器在处理请求的过程中发生了错误 100 Continue继续。客户端应继续其请求 101 Switching Protocols切换协议。...
「2021」高频前端面试题汇总之计算机网络篇.pdf
12-14
"计算机网络篇" 计算机网络是前端开发中一个非常重要的知识点，本文将从 HTTP 协议、HTTP 状态码、HTTP 请求头和响应头等方面对计算机网络进行详细的讲解。 HTTP 协议 HTTP（HyperText Transfer Protocol）是用于...
前端面试题（常问-概念篇）
01-08
... ... ...HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、...2、前端世界的安全防护 跨站脚本攻击（XSS） 跨站脚本攻击其实说白了就是通过一些方式把JavaScript代码注入到用户的dom中并执行，从而实现一些盗取用户cookies
最强面试八股文-前端篇
10-05
同时，面试者还应该熟悉前端开发的其他重要概念，如响应式设计、JavaScript框架（如React、Vue、Angular）、Web性能优化、网络基础知识以及安全实践等，这些都是前端开发者必备的技能和知识。通过不断学习和实践，...
最全前端面试题-1（前端基础篇-上百篇题集整理1个月）
05-04
其他面试题涉及内容广泛，包括网络分层、HTTP 协议、数据库差异、前端框架比较、构建工具、登录认证方式等，这些都是前端开发者必备的知识体系。掌握这些知识，能帮助你在面试中展现出扎实的专业技能。
前端面试题大全+各大厂（附加答案）
03-16
本文收集了各大公司的前端面试题，并且提供了详细的答案。如果您正在准备前端面试，这篇文章可能会为您提供帮助。这些面试题覆盖了不同的前端知识领域，包括HTML、CSS、JavaScript、框架等等。无论您是初学者还是...
网络知识小总结
weixin_30437481的博客
09-04 318
OSI 七层 应用层 (HTTP、DNS、FTP) 表示层 会话层 传输层 (TCP、UDP) 网络层 (IP) 数据链路层 (MAC) 物理层 UDP 问：UDP 与 TCP 的区别是什么？ 答：首先 UDP 协议是面向无连接的，也就是说不需要在正式传递数据之前先连接起双方。然后 UDP 协议只是数据报文的搬运工，不保证有序且不丢失的传递到对端，并且UDP 协议也没有任何控制...
前端面试题--计算机网络
weixin_44501366的博客
10-24 2842
常说某某计算机开了 FTP 服务便是启动了文件传输服务。下载文件，上传主页，都要用到 FTP 服务。
前端面试题（网络协议相关）
qq_41157351的博客
10-27 746
网络协议相关 浏览器缓存命中 Etage LastModified If-modified-Since和If-None-Match 1.用户第一次向服务器请求资源的时候，服务器直接返回资源以及状态码200，浏览器缓存资源 2.第二次请求相同资源的时候，会比较出和上一次返回200的请求的时间差，如果大于cache-control 中max-age的值，如果没有超过就命中强缓存，直接从缓存拿资源 3.如果超过，就向服务器发送header带有If-None-Match和If-Modified-Since的请求
前端常见面试题（网络）
qq_38253873的博客
03-28 368
一个完整的 URL 是由哪几个部分组成的 protocol： protocal即协议，https是一种协议也是URL的开头部分 协议包括FTP，HTTP，file等等 hostname: hostname 即主机名 指存放资源的服务器的域名系统(DNS)主机名或是IP地址 如www.baidu.com关于域名和DNS在后面会有详细的介绍 port port即端口，省略时使用协议的默认端口 需要知...
前端面试题之计算机网络篇
爱是与世界平行
05-28 2542
前端面试题之计算机网络篇一、HTTP协议1. GET和POST的请求的区别2. POST和PUT请求的区别3. 常见的HTTP请求头和响应头4. HTTP状态码304是多好还是少好5. 常见的HTTP请求方法6. OPTIONS请求方法及使用场景7. HTTP 1.0 和 HTTP 1.1 之间有哪些区别？8. HTTP 1.1 和 HTTP 2.0 的区别9. HTTP和HTTPS协议的区别10. GET方法URL长度限制的原因11. 当在浏览器中输入 Google.com 并且按下回车之后发生了什么？1
前端网络常考面试题
qq_40619263的博客
07-03 342
一、http 1.http几个版本的区别？ 2.http请求有哪些方法？区别是什么？ 3.http和https的区别？ 4.对称加密和非对称加密。 5.http状态码。 6.http请求头和响应头相关字段。 7.https工作原理. 8.http缓存。（强缓存和协商缓存） ...
前端计算机网络常见面试题目总结
qq_44788119的博客
07-20 958
1：说一下 http 和 https http：是超文本传输协议，是目前互联网运用最为广泛的协议，他主要是服务器和客户端传输获取数据的一个桥梁，http是明文传输，如果攻击者窃取了服务器和客户端传输的报文，很容易被读懂，因此http不适合传输比较铭感的信息。 https:安全套接字层超文本传输协议HTTPS，就是在http基础上加入了ssl层,就是通过ssl对数据进行了加密，因此https要比http安全。 2：http的缺点 1：通信使用明文，内容可能被窃取 2：不验证通信方的身份容易遭遇伪装 3：无法证
面试题part4【Web前端&网络协议】
Estelle0322的博客
09-23 495
Ajax请求有几种返回值 text html script xml json 最基础的ajax只有两种数据相应：即 XMLHttpRequest 对象的 responseText 或 responseXML 属性。 Ajax有几部分组成，核心是什么 Ajax包含： 基于CSS标准的表示； 使用Document Object Model进行动态显示和交互； 使用XMLHttpReques...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值