计算机网路面试题整理

独立开发者刘学生
161 阅读16分钟

跨域的方式都有哪些？他们的特点是什么

出现频率： 60%

掌握难度：60分

作用：

参考答案：

正向代理反向代理：blog.csdn.net/Dax1_/artic…

blog.csdn.net/weixin_4324…

blog.csdn.net/weixin_6637…

nginx反向代理接口跨域

    可以将前端项目部署到和接口同源的当前本地的服务器上。在vue.config.js 中进行代理配置，假设当我访问 http://localhost:9528/api/login 时会转换为间接访问 http://localhost:3000/api/login

devServer: {
    // 其他代码省略。。。。。
    
    // 代理配置
    proxy: {
      // 代理服务器，当请求的网址是http://localhost:3000的时候，会转成http://192.168.80.115:3000
      // /api 是 看接口文档所写的，每当访问本地的/api接口时，会转化为访问真实的服务器
      '/api': {
        target: 'http://localhost:3000' // 我们要代理的真实接口地址
      }
    }

JSONP⭐⭐⭐⭐⭐

JSONP通过同源策略涉及不到的"漏洞"，也就是像img中的src，link标签的href,script的src都没有被同源策略限制到

JSONP只能get请求

源码：

    function addScriptTag(src) {
      var script = document.createElement("script")
      script.setAttribute('type','text/javascript')
      script.src = src
      document.appendChild(script)
    }

    
    // 回调函数
    function endFn(res) {
      console.log(res.message);
    }

    // 前后端商量好，后端如果传数据的话，返回`endFn({message:'hello'})`

document.domain⭐

只能跨一级域名相同的域(www.qq.om和www.id.qq.com , 二者都有qq.com)

使用方法

    >表示输入， <表示输出 ，以下是在www.id.qq.com网站下执行的操作

    > var w = window.open("https://www.qq.com")
    < undefined
    > w.document
    ✖ VM3061:1 Uncaught DOMException: Blocked a frame with origin "https://id.qq.com" from accessing a cross-origin frame.
        at <anonymous>:1:3
    > document.domain
    < "id.qq.com"
    > document.domain = 'qq.com'
    < "qq.com"
    > w.document
    < #document

location.hash+iframe⭐⭐

因为hash传值只能单向传输，所有可以通过一个中间网页，a若想与b进行通信，可以通过一个与a同源的c作为中间网页，a传给b，b传给c，c再传回a

    具体做法：在a中放一个回调函数，方便c回调。放一个iframe标签，随后传值

    <iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe>
    <script>
        var iframe = document.getElementById('iframe');

        // 向b.html传hash值
        setTimeout(function() {
            iframe.src = iframe.src + '#user=admin';
        }, 1000);
        
        // 开放给同域c.html的回调方法
        function onCallback(res) {
            alert('data from c.html ---> ' + res);
        }
    </script>


    在b中监听哈希值改变，一旦改变，把a要接收的值传给c

    <iframe id="iframe" src="http://www.domain1.com/c.html" style="display:none;"></iframe>
    <script>
        var iframe = document.getElementById('iframe');

        // 监听a.html传来的hash值，再传给c.html
        window.onhashchange = function () {
            iframe.src = iframe.src + location.hash;
        };
    </script>


    在c中监听哈希值改变，一旦改变，调用a中的回调函数

    <script>
        // 监听b.html传来的hash值
        window.onhashchange = function () {
            // 再通过操作同域a.html的js回调，将结果传回
            window.parent.parent.onCallback('hello: ' + location.hash.replace('#user=', ''));
        };
    </script>

window.name+iframe⭐⭐

利Access用window.name不会改变（而且很大）来获取数据，
a要获取b的数据，b中把数据转为json格式放到window.name中

postMessage⭐

a窗口向b窗口发送数据，先把data转为json格式，在发送。提前设置好messge监听
b窗口进行message监听，监听到了以同样的方式返回数据，
a窗口监听到message，在进行一系列操作

CORS⭐⭐⭐⭐⭐

通过自定义请求头来让服务器和浏览器进行沟通
有简单请求和非简单请求
满足以下条件，就是简单请求
    请求方法是HEAD、POST、GET
    请求头只有Accept、AcceptLanguage、ContentType、ContentLanguage、Last-Event-Id
简单请求，浏览器自动添加一个Origin字段
    同时后端需要设置的请求头
        Access-Control-Allow-Origin --必须
        Access-Control-Expose-Headers
            XMLHttpRequest只能拿到六个字段，要想拿到其他的需要在这里指定
    Access-Control-Allow-Credentials --是否可传cookie
    要是想传cookie，前端需要设置xhr.withCredentials = true，后端设置Access-Control-Allow-Credentials
非简单请求，浏览器判断是否为简单请求，如果是非简单请求，则 浏览器先发送一个header头为option的请求进行预检
    预检请求格式（请求行 的请求方法为OPTIONS（专门用来询问的））
        Origin
        Access-Control-Request-Method
        Access-Control-Request-Header
    浏览器检查了Origin、Access-Control-Allow-Method和Access-Control-Request-Header之后确认允许就可以做出回应了
    通过预检后，浏览器接下来的每次请求就类似于简单请求了

nginx代理跨域⭐⭐⭐⭐

nginx模拟一个虚拟服务器，因为服务器与服务器之间是不存在跨域的，
发送数据时 ，客户端->nginx->服务端
返回数据时，服务端->nginx->客户端

讲一讲三次握手四次挥手，为什么是三次握手四而不是两次握手？

出现频率： 50%

掌握难度：70分

作用：

参考答案：

客户端和服务端之间通过三次握手建立连接，四次挥手释放连接

三次握手，客户端先向服务端发起一个SYN包，进入SYN_SENT状态，服务端收到SYN后，给客户端返回一个ACK+SYN包，表示已收到SYN，并进入SYN_RECEIVE状态，最后客户端再向服务端发送一个ACK包表示确认，双方进入establish状态。

之所以是三次握手而不是两次，是因为如果只有两次，在服务端收到SYN后，向客户端返回一个ACK确认就进入establish状态，万一这个请求中间遇到网络情况而没有传给客户端，客户端一直是等待状态，后面服务端发送的信息客户端也接受不到了。

四次挥手，首先客户端向服务端发送一个FIN包，进入FIN_WAIT1状态，服务端收到后，向客户端发送ACK确认包，进入CLOSE_WAIT状态，然后客户端收到ACK包后进入FIN_WAIT2状态，然后服务端再把自己剩余没传完的数据发送给客户端，发送完毕后在发送一个FIN+ACK包，进入LAST_ACK（最后确认）状态，客户端收到FIN+ACK包后，再向服务端发送ACK包，在等待两个周期后在关闭连接

之所以等待两个周期是因为最后客户端发送的ACK包可能会丢失，如果不等待2个周期的话，服务端在没收收到ACK包之前，会不停的重复发送FIN包而不关闭，所以得等待两个周期

实际使用场景：

网络OSI七层模型都有哪些？TCP是哪一层的

出现频率： 50%

掌握难度：70分

作用：

参考答案：

6803308dfc677c70ea7154235357222c.png

blog.csdn.net/NRWHF/artic…

4556a80c9dd045c8969d91dd1c33675a.png

06a03ba4ca5e467fb543d69a92d153b6.png

  • 七层模型

    • 应用层
    • 表示层
    • 会话层
    • 传输层
    • 网络层
    • 数据链路层
    • 物理层

  • TCP属于传输层

实际使用场景：

Get和Post的区别

出现频率： 70%

掌握难度：70分

作用：

参考答案：

冪等/不冪等（可缓存/不可缓存）

get请求是冪等的，所以get请求的数据是可以缓存的
而post请求是不冪等的，查询查询对数据是有副作用的，是不可缓存的

传参

get传参，参数是在url中的
    准确的说get传参也可以放到body中，只不过不推荐使用
post传参，参数是在请求体中
    准确的说post传参也可以放到url中，只不过不推荐使用

安全性

get较不安全
post较为安全
准确的说两者都不安全，都是明文传输的，在路过公网的时候都会被访问到，不管是url还是header还是body，都会被访问到，要想做到安全，就需要使用https

参数长度

get参数长度有限，是较小的
    准确来说，get在url传参的时候是很小的
post传参长度不受限制

发送数据

post传参发送两个请求包，一个是请求头，一个是请求体，请求头发送后服务器进行验证，要是验证通过的话就会给客户端发送一个100-continue的状态码，然后就会发送请求体

字符编码

get在url上传输的时候只允许ASCII编码

实际使用场景：

讲讲http缓存

出现频率： 30%

掌握难度：80分

作用：

参考答案：

juejin.cn/post/712719…

blog.csdn.net/qq_39903567…

缓存分为强缓存和协商缓存

强缓存
    在浏览器加载资源时，先看看cache-control里的max-age，判断数据有没有过期，如果没有直接使用该缓存 ，有些用户可能会在没有过期的时候就点了刷新按钮，这个时候浏览器就回去请求服务端，要想避免这样做，可以在cache-control里面加一个immutable.
    public
        允许客户端和虚拟服务器缓存该资源，cache-control中的一个属性
    private
        只允许客户端缓存该资源
    no-cache
        不允许强缓存，可以协商缓存
    no-store
        不允许缓存

协商缓存
    浏览器加载资源时，没有命中强缓存，这时候就去请求服务器，去请求服务器的时候，会带着两个参数，一个是If-None-Match，也就是响应头中的etag属性，每个文件对应一个etag;另一个参数是If-Modified-Since,也就是响应头中的Last-Modified属性，带着这两个参数去检验缓存是否真的过期，如果没有过期，则服务器会给浏览器返回一个304状态码，表示缓存没有过期，可以使用旧缓存。
    etag的作用
        有时候编辑了文件，但是没有修改，但是last-modified属性的时间就会改变，导致服务器会重新发送资源，但是etag的出现就完美的避免了这个问题，他是文件的唯一标识

缓存位置：

内存缓存Memory-Cache
离线缓存Service-Worker
磁盘缓存Disk-Cache
推送缓存Push-Cache

实际使用场景：

tcp 和udp有什么区别

出现频率： 30%

掌握难度：70分

作用：

参考答案：

blog.csdn.net/weixin_3848…

连接方面

tcp面向连接，udp不需要连接
    tcp需要三次握手四次挥手请求连接

可靠性

tcp是可靠传输；一旦传输过程中丢包的话会进行重传
udp是不可靠传输，但会最大努力交付

工作效率

UDP实时性高，比TCP工作效率高
    因为不需要建立连接，更不需要复杂的握手挥手以及复杂的算法，也没有重传机制

是否支持多对多

TCP是点对点的
UDP支持一对一，一对多，多对多

首部大小

tcp首部占20字节
udp首部占8字节

实际使用场景：

从浏览器输入url后都经历了什么

出现频率： 70%

掌握难度：80分

作用：

参考答案：

blog.csdn.net/m0_57133702…

blog.csdn.net/LXLXLJLJ/ar…

1daffdab605148d68abe412effa1cecb.png

f422533591f142408a32aa363278899c.png

5b0d71fa241ebedfb313c20828fbf410.png

blog.csdn.net/LXLXLJLJ/ar…

blog.csdn.net/m0_57133702…

blog.csdn.net/LXLXLJLJ/ar…

先进行DNS域名解析，先查看本地hosts文件，查看有没有当前域名对应的ip地址，若有直接发起请求，没有的话会在本地域名服务器去查找，该查找属于递归查找，如果本地域名服务器没查找到，会从根域名服务器查找，该过程属于迭代查找，根域名会告诉你从哪个与服务器查找，最后查找到对应的ip地址后把对应规则保存到本地的hosts文件中。 如果想加速以上及之后的http请求过程的话可以使用缓存服务器CDN，CDN过程如下：

用户输入url地址后，本地DNS会解析url地址，不过会把最终解析权交给CNAME指向的CDN的DNS服务器
CDN的DNS服务器会返回给浏览器一个全局负载均衡IP
用户会根据全局负载均衡IP去请求全局负载均衡服务器
全局负载均衡服务器会根据用户的IP地址，url地址，会告诉用户一个区域负载均衡设备，让用户去请求它。
区域负载均衡服务器会为用户选择一个离用户较近的最优的缓存服务器，并把ip地址给到用户
用户想缓存服务器发送请求，如果请求不到想要的资源的话，会一层层向上一级查找，知道查找到为止。

进行http请求，三次握手四次挥手建立断开连接 服务器处理，可能返回304也可能返回200

返回304说明客户端缓存可用，直接使用客户端缓存即可，该过程属于协商缓存
返回200的话会同时返回对应的数据

客户端自上而下执行代码

其中遇到CSS加载的时候，CSS不会阻塞DOM树的解析，但是会阻塞DOM树的渲染，并且CSS会阻塞下面的JS的执行
然后是JS加载，JS加载会影响DOM的解析，之所以会影响，是因为JS可能会删除添加节点，如果先解析后加载的话，DOM树还得重新解析，性能比较差。如果不想阻塞DOM树的解析的话，可以给script添加一个defer或者async的标签。
    defer：不会阻塞DOM解析，等DOM解析完之后在运行，在DOMContentloaed之前
    async: 不会阻塞DOM解析，等该资源下载完成之后立刻运行
进行DOM渲染和Render树渲染
    获取html并解析为Dom树
    解析css并形成一个cssom（css树）
    将cssom和dom合并成渲染树（render树）
    进行布局（layout）
    进行绘制（painting）
    回流重绘
        回流必将引起重绘，重绘不一定引起回流

实际使用场景：

什么是CDN？

出现频率： 30%

掌握难度：70分

作用：

参考答案： blog.csdn.net/dc_programm…

关于 cdn、回源等问题一网打尽

1.首先访问本地的 DNS ，如果没有命中，继续递归或者迭代查找，直到命中拿到对应的 IP 地址。

2.拿到对应的 IP 地址之后服务器端发送请求到目的地址。注意这里返回的不直接是 cdn 服务器的 IP 地址，而是全局负载均衡系统的 IP 地址

4.全局负载均衡系统会根据客户端的 IP地址和请求的 url 和相应的区域负载均衡系统通信

5.区域负载均衡系统拿着这两个东西获取距离客户端最近且有相应资源的cdn 缓存服务器的地址，返回给全局负载均衡系统

6.全局负载均衡系统返回确定的 cdn 缓存服务器的地址给客户端。

7.客户端请求缓存服务器上的文件

实际使用场景：

什么是xss？什么是csrf？

出现频率：30%

掌握难度：50分

作用：

参考答案：

xss脚本注入

不需要你做任何的登录认证，它会通过合法的操作（比如在url中输入、在评论框中输入），向你的页面注入脚本（可能是js、hmtl代码块等）。
防御
    编码：对用户输入的数据进行HTML Entity 编码。把字符转换成 转义字符。Encode的作用是将$var等一些字符进行转化，使得浏览器在最终输出结果上是一样的。
    过滤：移除用户输入的和事件相关的属性。

csrf跨域请求伪造

在未退出A网站的前提下访问B，B使用A的cookie去访问服务器
防御：token，每次用户提交表单时需要带上token（伪造者访问不到），如果token不合法，则服务器拒绝请求

实际使用场景：

OWASP top10 （10项最严重的Web应用程序安全风险列表）都有哪些?

出现频率： 10%

掌握难度：70分

作用：

参考答案：

SQL注入
    在输入框里输入sql命令

失效的身份验证
    拿到别人的cookie来向服务端发起请求，就可以做到登陆的目的

敏感数据泄露
    明文传输状态下可能被抓包拦截，这时候就造成数据泄露
        想做到抓包，比如在网吧，共享一个猫上网，这时候抓包就可行，方法网上一搜一大把
    不过此风险大部分网站都能得到很好的解决，https或者md5加密都可以

XML 外部实体

失效的访问控制

安全配置错误

XSS

不安全的反序列化

使用含有已知漏洞的组件

不足的日志记录和监控

怎么样？计算机网络是不是没有想象中的那么难，如果你没看过瘾的话，推荐你这篇文章：【长文】前端需要了解的计算机网络知识
是不是得感激我一下【手动滑稽】

实际使用场景：

****

出现频率：

掌握难度：

作用：

参考答案：

实际使用场景：

****

出现频率：

掌握难度：

作用：

参考答案：

实际使用场景：

****

出现频率：

掌握难度：

作用：

参考答案：

实际使用场景：

****

出现频率：

掌握难度：

作用：

参考答案：

实际使用场景：

****

出现频率：

掌握难度：

作用：

参考答案：

实际使用场景：

****

出现频率：

掌握难度：

作用：

参考答案：

实际使用场景：

****

出现频率：

掌握难度：

作用：

参考答案：

实际使用场景：

****

出现频率：

掌握难度：

作用：

参考答案：

实际使用场景：

****

出现频率：

掌握难度：

作用：

参考答案：

实际使用场景：

****

出现频率：

掌握难度：

作用：

参考答案：

实际使用场景：

****

出现频率：

掌握难度：

作用：

参考答案：

实际使用场景：

****

出现频率：

掌握难度：

作用：

参考答案：

实际使用场景：

****

出现频率：

掌握难度：

作用：

参考答案：

实际使用场景：

****

出现频率：

掌握难度：

作用：

参考答案：

实际使用场景：

****

出现频率：

掌握难度：

作用：

参考答案：

实际使用场景：

****

出现频率：

掌握难度：

作用：

参考答案：

实际使用场景：

****

出现频率：

掌握难度：

作用：

参考答案：

实际使用场景：

****

出现频率：

掌握难度：

作用：

参考答案：

实际使用场景：

****

出现频率：

掌握难度：

作用：

参考答案：

实际使用场景：

****

出现频率：

掌握难度：

作用：

参考答案：

实际使用场景：

****

出现频率：

掌握难度：

作用：

参考答案：

实际使用场景：

****

出现频率：

掌握难度：

作用：

参考答案：

实际使用场景：

****

出现频率：

掌握难度：

作用：

参考答案：

实际使用场景：

****

出现频率：

掌握难度：

作用：

参考答案：

实际使用场景：

****

出现频率：

掌握难度：

作用：

参考答案：

实际使用场景：

****

出现频率：

掌握难度：

作用：

参考答案：

实际使用场景：

****

出现频率：

掌握难度：

作用：

参考答案：

实际使用场景：

****

出现频率：

掌握难度：

作用：

参考答案：

实际使用场景：

****

出现频率：

掌握难度：

作用：

参考答案：

实际使用场景：

****

出现频率：

掌握难度：

作用：

参考答案：

实际使用场景：

****

出现频率：

掌握难度：

作用：

参考答案：

实际使用场景：

avatar
文章
阅读
粉丝