前端相关网络面试题

andyhu

发布于 2023-07-05 15:12:05

1920

发布于 2023-07-05 15:12:05

文章被收录于专栏：andyhu-大前端andyhu-大前端

前言

前几篇文章分享了一些js、vue面试题的答题方案和总结归纳以及借鉴的参考答案，那这篇就来分享一下网络相关的面试题。

1.网络由下往上分为：

物理层
数据链路层
网络层--IP协议
传输层--TCP/IP协议、UDP协议
会话层
表示层和应用层--HTTP协议

2. TCP和UDP

答题思路：可靠、顺序、速度；面向连接/面向非连接、传输层协议

TCP：是面向连接的一种传输层协议。属于传输层协议。TCP链接之后，客户端和服务器可以互相发送消息，在客户端或者服务器没有主动断开之前，连接一直存在属于长连接。
- 优点：传输数据无大小限制、准确可靠、先发先至（保证数据顺序）
- 缺点：传输速度慢、不能做离线任务、连接有耗时
- 应用场景：当对网络通讯质量有要求的时候，往往要求数据的准确无误，文件传输（FTP协议就是基于TCP）、接收邮件（SMTP协议），浏览器（HTTP协议就是基于tcp的实现）
UDP：是面向非连接的用户数据报协议。属于传输层协议。无连接指的是在传输数据之前不需要交换信息，没有握手建立连接的过程，只需要直接将对应的数据发送到指定的地址和端口就行。例如：IP 电话就可以用 UDP 实现
- 优点：速度快、效率高
- 缺点：容易丢包（数据）、先发未必先至（不保证数据顺序）

TCP 协议建立需要三次握手，断开连接需要四次挥手三次握手的原因是为了避免丢包（数据丢失）

握手过程中传递的包里不包含数据，三次握手完毕后，客户端与服务器才正式开始传送数据，断开连接时服务器和客户端均可以主动发起断开TCP连接的请求，断开过程需要经过“四次挥手”
TCP协议建立需要三次握手，断开连接需要四次挥手

三次握手：

由客户端发送建立TCP连接的请求报文，其中报文中包含seq序列号，是由发送端随机生成的，并且将报文中的SYN字段置为1，表示需要建立TCP连接。（SYN=1，seq=x，x为随机生成数值）
由服务端回复客户端发送的TCP连接请求报文，其中包含seq序列号，是由回复端随机生成的，并且将SYN置为1，而且会产生ACK字段，ACK字段数值是在客户端发送过来的序列号seq的基础上加1进行回复，以便客户端收到信息时，知晓自己的TCP建立请求已得到验证。（SYN=1，ACK=x+1，seq=y，y为随机生成数值）这里的ack加1可以理解为是确认和谁建立连接。
客户端收到服务端发送的TCP建立验证请求后，会使自己的序列号加1表示，并且再次回复ACK验证请求，在服务端发过来的seq上加1进行回复。（SYN=1，ACK=y+1，seq=x+1）

三次握手详细解答地址

==为什么 TCP 是三次握手而不是两次或者四次握手来建立连接？==

两次握手没办法确保客户端是不是已经收到了自己的同步信号。因为有这三个步骤就能确保初始序列号一致了，所以不需要第四个步骤。

参考文章

四次挥手：

TCP/IP协议主要分为四层：数据链路层、网络层、传输层、应用层

2. HTTP和HTTPS的区别

HTTP

HTTP是基于TCP协议的应用的超文本协议，属于应用层协议。请求时需要建立TCP连接，请求结束后断开连接，完成一次请求/响应操作。
HTTP协议永远都是客户端发起请求，服务器回送响应，这样就限制了使用HTTP协议，无法实现在客户端没有发送请求的时候，服务器将消息推送给客户端。
HTTP协议是一个无状态的协议，同一个客户端的这次请求是独立的、和上次请求是没有对应关系。

优点：基于应用层的接口使用方便缺点：1.传输速度慢，数据包大。2.数据传输安全性差注意：服务器不会主动给客户端发送请求

HTTP与HTTPS的主要区别：

https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。
http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
http的连接很简单，是无状态的；HTTPS协议是由==SSL+HTTP协议==构建的可进行加密传输、身份认证的网络协议，比http协议安全。

==HTTPS 简单连接的过程==

非对称加密比较耗时，所以 HTTPS 采用的是：对称加密 + 非对称加密两种方式结合；用非对称加密的方式来传输加密随机数的秘钥，然后采用对称加密的方式来传输数据。具体过程如下：

客户端向服务端发送 https 请求，请求头里携带了支持的 TLS/SSL 协议版本，支持的加密算法，秘钥长度信息
服务端向客户端发送加密组件、公钥、证书的信息（颁发日期，过期时间）；加密组件是从收到的客户端加密组件中筛选出来的。
客户端先解析证书，验证颁发机构、过期时间等，如果证书正常，客户端生成随机密码串，然后用接受到的公钥对随机密码串进行加密，将密码后的随机密码串发送给服务端（此加密采用非对称加密），否则弹出警告信息，结束 TLS
服务端使用证书的私钥非对称解密得到客户端的随机密码，用获取的随机密码将传输的明文内容进行对称加密，然后传输加密后的数据。

HTTPS 一定安全吗？

有可能发生这种情况：客户端向服务端发起 https 请求，假如被假基站转发到一个中间人服务器，于是客户端是和「中间人服务器」完成了 TLS 握手，然后这个「中间人服务器」再与真正的服务端完成 TLS 握手。

中间人服务器与客户端在 TLS 握手过程中，实际上发送了自己伪造的证书给浏览器，而这个伪造的证书是能被浏览器（客户端）识别出是非法的，于是就会提醒用户该证书存在问题。

如果用户执意点击「继续浏览此网站」，相当于用户接受了中间人伪造的证书，那么后续整个 HTTPS 通信都能被中间人监听了。

所以，HTTPS 协议本身到目前为止还是没有任何漏洞的，即使你成功进行中间人攻击，本质上是利用了客户端的漏洞（用户点击继续访问或者被恶意导入伪造的根证书），并不是 HTTPS 不够安全。

2. socket

TCP/IP只是一个协议栈，就像操作系统的运行机制一样，必须要具体实现，同时还要提供对外的操作接口。这个就像操作系统会提供标准的编程接口，比如win32编程接口一样，TCP/IP也要提供可供程序员做网络开发所用的接口，这就是Socket编程接口。

3. WebSocket编程

答题技巧：可以与用ajax轮询技术做对比 WebSocket教程

websocket是H5的产物，应用层协议，是一种服务器推送技术，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，

WebSocket的特点：

建立在TCP协议之上，服务端的实现比较容易
与HTTP协议有良好的兼容性。握手阶段采用 HTTP 协议，因此能通过各种 HTTP 代理服务器
数据格式比较量，性能开销少，通信效率高
没有同源限制，客户端可以与容易服务器通信
协议标识是ws（如果加密，则为wss）,服务器网址就是URL，用于ws的默认端口是80，而用于wss的默认端口是443
可以发送文本，也可以发送二进制数据

4. IP协议

规定网络地址的协议叫做IP协议，它所定义的地址，就被称为IP地址。目前，广泛采用的是IP协议第四版，简称IPv4。

5. ajax实现原理

XMLHttpRequest 对象有一个 readyState 属性，表示当前处在请求/响应过程的哪个阶段;readyState的状态值：
- 0：未初始化，未调用 open() 方法
- 1：已打开(open)。已调用 open() 方法，未调用 send() 方法。
- 2：已发送(send)。已调用 send() 方法，未收到响应。
- 3：接收中(Receiving)。已收到部分响应。
- 4：已完成(complete)。响应完成，可以使用。
status表示响应的HTTP状态，如果 HTTP 状态码是 304，则表示资源未修改过，是从浏览器缓存中直接拿取的。当然这也意味着响应有效

注意：为保证跨浏览器兼容， onreadystatechange 事件处理程序应该在调用 open() 之前赋值；为保证请求头部被发送，必须在 open() 之后、 send() 之前调用 setRequestHeader()

  function ajax () {
    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4) {
        if ((xhr.status >= 200 &amp;&amp; xhr.status <= 300) || xhr.status == 304) {
          console.log(JSON.parse(xhr.responseText))
        } else {
          console.log("Request was unsuccessful：" + xhr.status)
        }
      }
    }
    xhr.open('get', 'json.txt')
    // xhr.setRequestHeader("MyHeader", "MyValue");
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send(null)
  }

6. get请求和post请求的区别？

post 更安全，post 的请求参数放在 request body 中（请求参数不会作为URL的一部分get请求会，请求参数不会保存在浏览器的历史记录里get请求会）
post 发送的数据更大（get有url长度限制）
post 能发送更多的数据类型（get只能发送ASCII字符的参数）
post 请求不会被浏览器主动缓存（get请求会被浏览器主动缓存）

7. 向服务器传递数据格式有哪些？

application/x-www-form-urlencoded： ajax请求默认使用这种格式
multipart/form-data：提交表单数据，用ajax请求表单上传文件时，必须要把contentType设置成multipart/form-data
application/json： axios默认提交就是使用这种格式，传递到后台的将是序列化后的json字符串
text/xml：（很少用）

8. 对跨域的理解

什么叫跨域？

同源策略：同源策略（Same Orgin Policy）是一种约定，它是浏览器核心也最基本的安全功能，它会阻止一个域的js脚本和另外一个域的内容进行交互，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。

所谓同源（即在同一个域）就是两个页面具有相同的协议（protocol）、主机（host）和端口号（port）；当一个请求url的协议、域名、端口三者之间的任意一个与当前页面url不同即为跨域。

跨域的业务场景：

web服务器和后台的服务放在不同的不同服务器上
项目中调用第三方接口的时候

解法方案：

假如后端和前端是部署在一起的时候，在开发阶段解决跨域问题，可以用修改本地host的方式，配置host映射
利用 script 标签可以引入任何源下的任何域下的地址的资源，不存在跨域限制，但只能发送get请求不能发送post请求需要服务器支持
CORS 解决方案，后端设置允许跨域访问的源就可以了，缺点是如果设置为星号，所有的源都能访问的时候，是不允许携带cookie的
proxy 跨域请求代理，在vue项目中webpack-dev-serve配置跨域请求代理 相当于提供了一个中转站服务器，这个中转站服务器和web客户端属于同源（服务器和服务器之间不存在跨域）

用nginx反向代理（跟上面一个方法类型）

配置 nginx 解决跨域问题

nginx通过配置反向代理解决跨域问题

配置 server 模块的 location

ocation 配置项定义了一条访问 Nginx 服务某一路径时的匹配规则，location 后面紧跟的是匹配的路径，这个路径可以直接写绝对路径，可以写正则匹配：

location ~ ^/(api2/api3) { # 当访问 http://localhost/api2 和 http://localhost/api 3 时命中
    # ...
}

location模块中的 proxy_pass

location 里有多个配置项，其中一个是 proxy_pass ，意思是将当前命中的 Nginx 接口（例如：http://localhost/api ）代理到其他 server 的接口，如下例子就是将 http://localhost/api 代理到 https://baidu.com/api

location /api {
    proxy_pass https://baidu.com;
}

location 中的 add_header 模块

Location 配置中的 add_header选项，表示 Nginx 将在 response 中添加一些额外的响应头信息给客户端。配置 Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers

location /api {
    add_header Access-Control-Allow-Origin * always;
    add_header Access-Control-Allow-Headers *;
    add_header Access-Control-Allow-Methods "GET, POST, PUT, OPTIONS";
    proxy_pass https://baidu.com;   # 需要代理的服务端地址
}

其中 * 代表通配符，意思是所有 origin 都允许跨域访问，在部署的时候写成自己前端服务地址就可以了

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2023-06-27，如有侵权请联系 cloudcommunity@tencent.com 删除

服务器