面试-网络

79. http 响应码 301 和 302 表明的是什么？有什么区别？
80. forward 和 redirect 的区别？
81. get 和 post 请求有哪些区别？
82. tcp 为何要三次握手，两次不行吗？为何？
83. 说一下 tcp 粘包是怎么产生的？
84. OSI 的七层模型都有哪些？
85. 简述 tcp 和 udp的区别？
86. 如何实现跨域？
87. 说一下 JSONP 实现原理？

网络

79. http 响应码 301 和 302 表明的是什么？有什么区别？

答：301，302 都是HTTP状态的编码，都表明着某个URL发生了转移。

区别：

• 301 redirect: 301 表明永久性转移(Permanently Moved)。
• 302 redirect: 302 表明暂时性转移(Temporarily Moved )。 

80. forward 和 redirect 的区别？

都是servlet种的两种主要的跳转方式。
forward 又叫转发(经典的MVC模式)
redirect 叫作重定向(它通常用于避免用户的非正常访问。例如：用户在没有登陆的状况下访问后台资源，Servlet能够将该HTTP请求重定向到登陆页面)

二者的区别总结：

• 1。从地址栏显示来讲：

  1）forword是服务器内部的重定向，服务器直接访问目标地址的 url网址，把里面的东西读取出来，可是客户端并不知道，所以用forward的话，客户端浏览器的网址是不会发生变化的。

  2）redirect是服务器根据逻辑，发送一个状态码，告诉浏览器从新去请求那个地址，因此地址栏显示的是新的地址。

• 2。 从数据共享来讲：

  1）因为在整个定向的过程当中用的是同一个request，所以forward会将request的信息带到被重定向的jsp或者servlet中使用。即request能够共享数据

  2）redirect不能共享

• 3。从效率来讲：

  1）forword效率高，而redirect效率低

• 4。从本质来讲：

  forword转发是服务器上的行为，而redirect重定向是客户端的行为

• 5。从请求的次数来讲：

  forword只有一次请求；而redirect有两次请求，

直接转发方式（Forward），客户端和浏览器只发出一次请求，Servlet、HTML、JSP或其它信息资源，由第二个信息资源响应该请求，在请求对象request中，保存的对象对于每一个信息资源是共享的。

间接转发方式（Redirect）,实际是两次HTTP请求，服务器端在响应第一次请求的时候，让浏览器再向另一个URL发出请求，从而达到转发的目的。

81. get 和 post 请求有哪些区别？

最直观的区别就是GET把参数包含在URL中，POST经过request body传递参数。

• GET在浏览器回退时是无害的，而POST会再次提交请求。
• GET产生的URL地址能够被Bookmark，而POST不能够。
• GET请求会被浏览器主动cache，而POST不会，除非手动设置。
• GET请求只能进行url编码，而POST支持多种编码方式。
• GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
• GET请求在URL中传送的参数是有长度限制的，而POST么有。
• 对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
• GET比POST更不安全，由于参数直接暴露在URL上，因此不能用来传递敏感信息。
• GET参数经过URL传递，POST放在Request body中。

但本质上GET和POST请求是同样同样的,详见 https://www.cnblogs.com/logsh...
GET和POST是什么？HTTP协议中的两种发送请求的方法。HTTP的底层是TCP/IP。因此GET和POST的底层也是TCP/IP，也就是说，GET/POST都是TCP连接。GET和POST能作的事情是同样同样的。你要给GET加上request body，给POST带上url参数，技术上是彻底行的通的。可是因为HTTP的规定和浏览器/服务器的限制，致使他们在应用过程当中体现出一些不一样。

GET和POST还有一个重大区别：

• GET产生一个TCP数据包；POST产生两个TCP数据包。
  对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；
  而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）

  虽然看起来GET比POST更有效,但据研究，在网络环境好的状况下，发一次包的时间和发两次包的时间差异基本能够无视。而在网络环境差的状况下，两次包的TCP在验证数据包完整性上，有很是大的优势,并且并非全部浏览器都会在POST中发送两次包，Firefox就只发送一次

82. tcp 为何要三次握手，两次不行吗？为何？

为了实现可靠数据传输， TCP 协议的通讯双方， 都必须维护一个序列号， 以标识发送出去的数据包中， 哪些是已经被对方收到的。 三次握手的过程便是通讯双方相互告知序列号起始值， 并确认对方已经收到了序列号起始值的必经步骤。

若是只是两次握手， 至多只有链接发起方的起始序列号能被确认， 另外一方选择的序列号则得不到确认。

83. 说一下 tcp 粘包是怎么产生的？

①. 发送方产生粘包

采用TCP协议传输数据的客户端与服务器常常是保持一个长链接的状态（一次链接发一次数据不存在粘包），双方在链接不断开的状况下，能够一直传输数据；但当发送的数据包过于的小时，那么TCP协议默认的会启用Nagle算法，将这些较小的数据包进行合并发送（缓冲区数据发送是一个堆压的过程）；这个合并过程就是在发送缓冲区中进行的，也就是说数据发送出来它已是粘包的状态了。

②. 接收方产生粘包

接收方采用TCP协议接收数据时的过程是这样的：数据到底接收方，从网络模型的下方传递至传输层，传输层的TCP协议处理是将其放置接收缓冲区，而后由应用层来主动获取（C语言用recv、read等函数）；这时会出现一个问题，就是咱们在程序中调用的读取数据函数不能及时的把缓冲区中的数据拿出来，而下一个数据又到来并有一部分放入的缓冲区末尾，等咱们读取数据时就是一个粘包。（放数据的速度 > 应用层拿数据速度） 

84. OSI 的七层模型都有哪些？

1. 应用层：网络服务与最终用户的一个接口。
2. 表示层：数据的表示、安全、压缩。
3. 会话层：创建、管理、终止会话。
4. 传输层：定义传输数据的协议端口号，以及流控和差错校验。
5. 网络层：进行逻辑地址寻址，实现不一样网络之间的路径选择。
6. 数据链路层：创建逻辑链接、进行硬件地址寻址、差错校验等功能。
7. 物理层：创建、维护、断开物理链接。

85. 简述 tcp 和 udp的区别？

网络协议是每一个前端工程师都必需要掌握的知识，TCP/IP 中有两个具备表明性的传输层协议，分别是 TCP 和 UDP

• TCP面向链接（如打电话要先拨号创建链接）;
  UDP是无链接的，即发送数据以前不须要创建链接。
• TCP提供可靠的服务。也就是说，经过TCP链接传送的数据，无差错，不丢失，不重复，且按序到达;UDP尽最大努力交付，即不保证可靠交付。
• Tcp经过校验和，重传控制，序号标识，滑动窗口、确认应答实现可靠传输。如丢包时的重发控制，还能够对次序乱掉的分包进行顺序控制。
• UDP具备较好的实时性，工做效率比TCP高，适用于对高速传输和实时性有较高的通讯或广播通讯。
• 每一条TCP链接只能是点到点的;UDP支持一对一，一对多，多对一和多对多的交互通讯。
• TCP对系统资源要求较多，UDP对系统资源要求较少。

86. 如何实现跨域？

方式一：图片ping或script标签跨域

图片ping经常使用于跟踪用户点击页面或动态广告曝光次数。 
script标签能够获得从其余来源数据，这也是JSONP依赖的根据。 

方式二：JSONP跨域

JSONP（JSON with Padding）是数据格式JSON的一种“使用模式”，可让网页从别的网域要数据。根据 XmlHttpRequest 对象受到同源策略的影响，而利用 <script>元素的这个开放策略，网页能够获得从其余来源动态产生的JSON数据，而这种使用模式就是所谓的 JSONP。用JSONP抓到的数据并非JSON，而是任意的JavaScript，用 JavaScript解释器运行而不是用JSON解析器解析。全部，经过Chrome查看全部JSONP发送的Get请求都是js类型，而非XHR。 

缺点：

• 只能使用Get请求
• 不能注册success、error等事件监听函数，不能很容易的肯定JSONP请求是否失败
• JSONP是从其余域中加载代码执行，容易受到跨站请求伪造的攻击，其安全性没法确保

方式三：CORS

Cross-Origin Resource Sharing（CORS）跨域资源共享是一份浏览器技术的规范，提供了 Web 服务从不一样域传来沙盒脚本的方法，以避开浏览器的同源策略，确保安全的跨域数据传输。现代浏览器使用CORS在API容器如XMLHttpRequest来减小HTTP请求的风险来源。与 JSONP 不一样，CORS 除了 GET 要求方法之外也支持其余的 HTTP 要求。服务器通常须要增长以下响应头的一种或几种：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 86400

跨域请求默认不会携带Cookie信息，若是须要携带，请配置下述参数：

"Access-Control-Allow-Credentials": true
// Ajax设置
"withCredentials": true

方式四：window.name+iframe

window.name经过在iframe（通常动态建立i）中加载跨域HTML文件来起做用。而后，HTML文件将传递给请求者的字符串内容赋值给window.name。而后，请求者能够检索window.name值做为响应。

• iframe标签的跨域能力；
• window.name属性值在文档刷新后依旧存在的能力（且最大容许2M左右）。

每一个iframe都有包裹它的window，而这个window是top window的子窗口。contentWindow属性返回<iframe>元素的Window对象。你可使用这个Window对象来访问iframe的文档及其内部DOM。

<!-- 
 下述用端口 
 10000表示：domainA
 10001表示：domainB
-->
<!-- localhost:10000 -->
<script>
 var iframe = document.createElement('iframe');
 iframe.style.display = 'none'; // 隐藏
 var state = 0; // 防止页面无限刷新
 iframe.onload = function() {
 if(state === 1) {
 console.log(JSON.parse(iframe.contentWindow.name));
 // 清除建立的iframe
 iframe.contentWindow.document.write('');
 iframe.contentWindow.close();
 document.body.removeChild(iframe);
 } else if(state === 0) {
 state = 1;
 // 加载完成，指向当前域，防止错误(proxy.html为空白页面)
 // Blocked a frame with origin "http://localhost:10000" from accessing a cross-origin frame.
 iframe.contentWindow.location = 'http://localhost:10000/proxy.html';
 }
 };
 iframe.src = 'http://localhost:10001';
 document.body.appendChild(iframe);
</script>
<!-- localhost:10001 -->
<!DOCTYPE html>
...
<script>
 window.name = JSON.stringify({a: 1, b: 2});
</script>
</html>

方式五：window.postMessage()

HTML5新特性，能够用来向其余全部的 window 对象发送消息。须要注意的是咱们必需要保证全部的脚本执行完才发送 MessageEvent，若是在函数执行的过程当中调用了它，就会让后面的函数超时没法执行。

下述代码实现了跨域存储localStorage

<!-- 
 下述用端口 
 10000表示：domainA
 10001表示：domainB
-->
<!-- localhost:10000 -->
<iframe src="http://localhost:10001/msg.html" name="myPostMessage" style="display:none;">
</iframe>
<script>
 function main() {
 LSsetItem('test', 'Test: ' + new Date());
 LSgetItem('test', function(value) {
 console.log('value: ' + value);
 });
 LSremoveItem('test');
 }
 var callbacks = {};
 window.addEventListener('message', function(event) {
 if (event.source === frames['myPostMessage']) {
 console.log(event)
 var data = /^#localStorage#(d+)(null)?#([Ss]*)/.exec(event.data);
 if (data) {
 if (callbacks[data[1]]) {
 callbacks[data[1]](data[2] === 'null' ? null : data[3]);
 }
 delete callbacks[data[1]];
 }
 }
 }, false);
 var domain = '*';
 // 增长
 function LSsetItem(key, value) {
 var obj = {
 setItem: key,
 value: value
 };
 frames['myPostMessage'].postMessage(JSON.stringify(obj), domain);
 }
 // 获取
 function LSgetItem(key, callback) {
 var identifier = new Date().getTime();
 var obj = {
 identifier: identifier,
 getItem: key
 };
 callbacks[identifier] = callback;
 frames['myPostMessage'].postMessage(JSON.stringify(obj), domain);
 }
 // 删除
 function LSremoveItem(key) {
 var obj = {
 removeItem: key
 };
 frames['myPostMessage'].postMessage(JSON.stringify(obj), domain);
 }
</script>
<!-- localhost:10001 -->
<script>
 window.addEventListener('message', function(event) {
 console.log('Receiver debugging', event);
 if (event.origin == 'http://localhost:10000') {
 var data = JSON.parse(event.data);
 if ('setItem' in data) {
 localStorage.setItem(data.setItem, data.value);
 } else if ('getItem' in data) {
 var gotItem = localStorage.getItem(data.getItem);
 event.source.postMessage(
 '#localStorage#' + data.identifier +
 (gotItem === null ? 'null#' : '#' + gotItem),
 event.origin
 );
 } else if ('removeItem' in data) {
 localStorage.removeItem(data.removeItem);
 }
 }
 }, false);
</script>

注意Safari一下，会报错：

Blocked a frame with origin “ http://localhost:10001” from accessing a frame with origin “ http://localhost:10000“. Protocols, domains, and ports must match.

避免该错误，能够在Safari浏览器中勾选开发菜单==>停用跨域限制。或者只能使用服务器端转存的方式实现，由于Safari浏览器默认只支持CORS跨域请求。

方式六：修改document.domain跨子域

前提条件：这两个域名必须属于同一个基础域名!并且所用的协议，端口都要一致，不然没法利用document.domain进行跨域，因此只能跨子域

在根域范围内，容许把domain属性的值设置为它的上一级域。例如，在”aaa.xxx.com”域内，能够把domain设置为 “xxx.com” 但不能设置为 “xxx.org” 或者”com”。

如今存在两个域名aaa.xxx.com和bbb.xxx.com。在aaa下嵌入bbb的页面，因为其document.name不一致，没法在aaa下操做bbb的js。能够在aaa和bbb下经过js将document.name = 'xxx.com';设置一致，来达到互相访问的做用。

方式七：WebSocket

WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通讯，同时容许跨域通信，是server push技术的一种很棒的实现。相关文章，请查看：WebSocket、WebSocket-SockJS

须要注意：WebSocket对象不支持DOM 2级事件侦听器，必须使用DOM 0级语法分别定义各个事件。

方式八：代理

同源策略是针对浏览器端进行的限制，能够经过服务器端来解决该问题

DomainA客户端（浏览器） ==> DomainA服务器 ==> DomainB服务器 ==> DomainA客户端（浏览器）

来源：blog.csdn.net/ligang2585116/article/details/73072868

87.说一下 JSONP 实现原理？

jsonp 即 json+padding，动态建立script标签，利用script标签的src属性能够获取任何域下的js脚本，经过这个特性(也能够说漏洞)，服务器端不在返货json格式，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。