前端面试系列四：网路及存储

快来加入我们吧！

"小和山的菜鸟们"，为前端开发者提供技术相关资讯以及系列基础文章。为更好的用户体验，请您移至我们官网小和山的菜鸟们 ( https://xhs-rookies.com/ ) 进行学习，及时获取最新文章。

"Code tailor" ，如果您对我们文章感兴趣、或是想提一些建议，微信关注 “小和山的菜鸟们” 公众号，与我们取的联系，您也可以在微信上观看我们的文章。每一个建议或是赞同都是对我们极大的鼓励！

面试系列不定期更新，请随时关注

前言

本篇专栏重点在于讲解面试中 网络及存储 的面试题内容。

注意： 本篇专栏至只会涉及到重点内容，并不会进行拓展。某些题目需要拓展知识点的，我们会将拓展内容、整体详细信息放置与每个题目的最前面，可以自行查看。

网络及存储

网络/存储
什么是 HTTP 请求
什么是跨域
有哪几种解决跨域的方法，各自优劣性。
jsonp 解决跨域问题原理和存在的问题
http2 和 http1 的区别
HTTPS 和 HTTP 区别
GET 和 POST 到底有什么区别
HTTP 里面的缓存机制
网络请求状态码
OSI/TCP 模型有哪几个部分
axios 实际上做了什么事情
如何解决 localstroage 的跨域问题
cookie、localstroage、sessionstroage 区别

题目解析

1. 什么是 HTTP 请求

全称：超文本传输协议（HyperText Transfer Protocol）

概念：HTTP 是一种能够获取像 HTML、图片等网络资源的通讯协议。

它是在 web 上进行数据交换的基础，是一种 client-server 协议。

HTTP 在因特网的角色：充当一个信使的角色，干的就是一个跑腿的活，在客户端和服务端之间传递信息，但我们又不能缺少它。

HTTP 协议是「应用层」协议，是与前端开发最息息相关的协议。

平时我们遇到的 HTTP 请求、 HTTP 缓存、Cookies、跨域等其实都跟 HTTP 息息相关。

2. 什么是跨域

跨域指的是非同源的资源之间尝试着进行交互通信，而由于受浏览器同源策略的限制，无法正常进行交互通信。

浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对 JavaScript 实施的安全限制。无法跨域是浏览器对于用户安全的考虑，同源策略限制了一下行为：Cookies、LocalStorage 和 IndexDB 无法读取 DOM 和 JS 对象无法获取，Ajax 请求发送不出去。

3. 有哪几种解决跨域的方法，各自优劣性

通过 jsonp 跨域：可以通过动态创建 script，再请求一个带参网址实现跨域通信。缺点：只能实现 get 一种请求。
document.domain + iframe 跨域：两个页面都通过 js 强制设置 document.domain 为基础主域，就实现了同域。此方案仅限主域相同，子域不同的跨域应用场景。
location.hash + iframe：a 欲与 b 跨域相互通信，通过中间页 c 来实现。三个页面，不同域之间利用 iframe 的 location.hash 传值，相同域之间直接 js 访问来通信。
window.name + iframe 跨域：通过 iframe 的 src 属性由外域转向本地域，跨域数据即由 iframe 的 window.name 从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制，但同时它又是安全操作。
postMessage 跨域：postMessage 是 HTML5 XMLHttpRequest Level 2 中的 API，且是为数不多可以跨域操作的 window 属性之一
它可用于解决以下方面的问题：
- 页面和其打开的新窗口的数据传递
- 多窗口之间消息传递
- 页面与嵌套的 iframe 消息传递上面三个场景的跨域数据传递
  用法：
- postMessage(data,origin)方法接受两个参数
- data：html5 规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用 JSON.stringify() 序列化。
- origin：协议+主机+端口号，也可以设置为 "*"，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。
跨域资源共享（CORS）：只服务端设置 Access-Control-Allow-Origin 即可，前端无须设置，若要带 cookie 请求：前后端都需要设置。
nginx 代理跨域：

nginx 配置解决 iconfont 跨域
nginx 反向代理接口跨域
- 跨域原理：同源策略是浏览器的安全策略，不是 HTTP 协议的一部分。服务器端调用 HTTP 接口只是使用 HTTP 协议，不会执行 JS 脚本，不需要同源策略，也就不存在跨越问题。
- 实现思路：通过 nginx 配置一个代理服务器（域名与 domain1 相同，端口不同）做跳板机，反向代理访问 domain2 接口，并且可以顺便修改 cookie 中 domain 信息，方便当前域 cookie 写入，实现跨域登录。

node.js 中间件代理跨域：node 中间件实现跨域代理，原理大致与 nginx 相同，都是通过启一个代理服务器，实现数据的转发，也可以通过设置 cookieDomainRewrite 参数修改响应头中 cookie 中域名，实现当前域的 cookie 写入，方便接口登录认证。
WebSocket 协议跨域：WebSocket protocol 是 HTML5 一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是 server push 技术的一种很好的实现。原生 WebSocket API 使用起来不太方便，我们使用 Socket.io，它很好地封装了 webSocket 接口，提供了更简单、灵活的接口，也对不支持 webSocket 的浏览器提供了向下兼容。

详情请见：九种跨域方式实现原理（完整版）

5. http2 和 http1 的区别

二进制分帧
头部压缩：使用 HPACK 对 HTTP/2 头部压缩
服务器推送
多路复用：最重要的特点，（MultiPlexing），即连接共享，即每一个 request 都是是用作连接共享机制的。一个 request 对应一个 id，这样一个连接上可以有多个 request，每个连接的 request 可以随机的混杂在一起，接收方可以根据 request 的 id 将 request 再归属到各自不同的服务端请求里面。
多个请求可同时在一个连接上并行执行（由于支持二进制的格式，可以无序）某个请求任务耗时严重，不会影响到其它连接的正常执行

更多请见：HTTP 的前世今生

6. HTTPS 和 HTTP 区别

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

7. GET 和 POST 到底有什么区别

get 和 post 本质上就是 TCP 连接，并无差别，但由于 HTTP 的规定和浏览器、服务器的限制，导致它

们在应用过程中有一些不同：

get 参数通过 URL 传递；post 放在 request body 中
get 请求在 URL 中传递的参数有长度限制；post 没有（HTTP 协议未规定，是因为浏览器和服务器的限制）
get 请求只能进行 URL 编码；post 请求有多种编码方式
get 请求参数会被完整保留在浏览历史记录里；post 中的参数不会被保留
get 产生一个 TCP 数据包；post 产生两个 TCP 数据包
对于 get 请求，浏览器将 http header 和 data 一并发送，服务器响应 200 OK；对于 post 请求，

浏览器先发送 header，服务器响应 100 Continue，浏览器再发送 data，服务器响应 200 OK

缓存方面：get 请求类似于查找的过程，用户获取数据，可以不用每次都与数据库连接，所以

可以使用缓存；post 请求一般做的是修改和删除工作，必须与数据库交互，所以不能使用缓存

8. HTTP 里面的缓存机制

两种缓存方式，根据响应的 header 内容来决定

强缓存（状态码：200）：浏览器不向服务器发送任何请求，直接从本地缓存中读取文件并返回（相关字段：Cache-Control、Expires）
协商缓存（状态码：304）：浏览器发送请求到服务器，通过服务器来告知缓存是否可用（相关字段：Last-Modified/If-Modified-Since、Etag/If-None-Match）

缓存相关 header

Cache-Control、Expires、Last-Modified/If-Modified-Since、Etag/If-None-Match

详情请见：彻底理解浏览器的缓存机制

9. 网络请求状态码

常见状态码：

200 请求成功
301 永久重定向
302 临时重定向
404 请求失败，请求所希望得到的资源未被在服务器上发现。
500 服务器遇到了不知道如何处理的情况。

更多请见：HTTP 响应状态码

10. OSI/TCP 模型有哪几个部分

OSI 七层模型

物理层 —— 比特流的传输
数据链路层 —— 控制网络层和物理层间的通信
网络层 —— IP 寻址和路由选择
传输层 —— 创建、管理、维护端到端的连接
会话层 —— 创建、管理、维护会话连接
表示层 —— 加解密、数据格式化
应用层 —— 为应用程序提供网络服务

而 TCP 四层模型则是将会话层、表示层、应用层统称为应用层，将物理层和数据链路层统称为数据链路层

详情请见：OSI 7 层模型和 TCP/IP 4 层模型

11. axios 实际上做了什么事情

Axios 是一个基于 Promise 的 HTTP 客户端，用于 node.js 和浏览器。它是同构的（= 它可以在具有相同代码库的浏览器和 node.js 中运行）。在服务器端它使用原生 node.js http 模块，而在客户端（浏览器）它使用 XMLHttpRequests。它本身具有以下特征

从浏览器中创建 XMLHttpRequest
支持 Promise API
客户端支持防止 CSRF
提供了一些并发请求的接口（重要，方便了很多的操作）
从 node.js 创建 http 请求
拦截请求和响应
转换请求和响应数据
取消请求
自动转换 JSON 数据

更多请见：axios docs

12. 如何解决 localstroage 的跨域问题

postMessage 用于解决不同域页面间的通信，主要参数为

message ：将要发送到其他 window 的数据
targetOrigin ：通过窗口的 origin 属性来指定哪些窗口能接收到消息事件
transfer（可选）：是否将所有权将转移给消息的接收方，而自己不再持有

详情请见：什么是 postMessage 浏览器同源政策及其规避方法

13. cookie、localstroage、sessionstroage 区别

cookie: 大小受限，只有 4kb 的大小，服务器端和浏览器；并且每次发送一个新的页面的时候 cookie 都会发送过去，这样无形浪费了带宽； cookie 还需要指定作用域，不可以跨域调用

localstorage： 是一个持久化的本地存储，除非强制删除，否则数据永远不会过期，支持 get 和 post 请求（存储在 2.5MB 到 10MB 之间）；不提供搜索功能，不能建立自定义的索引

sessionStroage: 是本地的一个会话级别的存储，在页面打开的时候创建，页面关闭的时候销毁

下节预告

下节我们将为大家带来 浏览器及计算机基础 的面试题解，敬请期待！