前端必须懂的计算机网络知识
1.网络模型数据处理过程
1538986514(1).jpg
2.域名的空间结构
1538986736(1).jpg
3.DNS查找过程
1.客户端向本地域名服务器发出请求，请求www.baidu.com的IP地址
2.本地DNS服务器向DNS根服务器发出请求，根DNS服务器会告诉本地服务器(.com)的服务器地址
3.本地DNS服务器会向(.com域)发请求，会得到(baidu.com)的服务器地址
4.本地DNS服务器会向(baidu.com)发请求,会得到(www.baidu.com)的IP地址61.135.169.125
5.本地DNS服务器向客户端回复域名(www.baidu.com)对应的IP地址是61.135.169.125
4.同源策略和跨域
浏览器只对XHR(XMLHttpRequest)请求有同源请求限制，同源就是协议、域名和端口号一致，不同源的客户端脚本在没有明确授权的情况下，不能读写对方XHR资源，反之不同源脚本读取对方XHR资源就是跨域。
以http://www.a.com/test/index.html 的同源检测举例：
• http://www.a.com/dir/page.html ----成功
• http://www.child.a.com/test/index.html ----失败，域名不同
• https://www.a.com/test/index.html ----失败，协议不同
• http://www.a.com:8080/test/index.html ----失败，端口号不同
5.跨域的解决方案
jsonp
浏览器对script标签src属性、link标签ref属性和img标签src属性没有同源策略限制，利用这个“漏洞”就可以很好的解决跨域请求，JSONP就是利用了script标签无同源限制的特点来实现的。
当向第三方站点请求时，我们可以将此请求放在script标签的src属性里，这就如同请求一个普通的JS脚本，可以自由的向不同的站点请求。
反向代理
当我们请求www.baidu.com 的时候，背后可能有成千上万台服务器为我们服务，但具体是哪一台，你不知道，也不需要知道，你只需要知道反向代理服务器是谁就好了，www.baidu.com 就是我们的反向代理服务器，反向代理服务器会帮我们把请求转发到真实的服务器那里去。Nginx就是性能非常好的反向代理服务器，用来做负载均衡。
1.webpack配置反向代理
2.axios配置反向代理
postMessage
配合iframes使用，假设a.html位于服务localhost:3000，b.html位于服务器localhost:4000
//a.html
<body>
<iframe id="frame" src="http://localhost:4000/b.html" frameborder="0" onload="load()"></iframe>
<script>
function load(){
let frame = document.getElementById('frame');
frame.contentWindow.postMessage('我很帅','http://localhost:4000');
window.onmessage =function (e){
console.log(e.data);
}
}
</script>
</body>
//otherWindow.postMessage(message, targetOrigin);
//otherWindow:指目标窗口，也就是给哪个window发消息，是 window.frames 属性的成员或者由 window.open 方法创建的窗口
//message:是要发送的消息，类型为 String、Object (IE8、9 不支持)
//targetOrigin: 是限定消息接收范围，不限制请使用'*'
//注意otherWindow和targetOrigin的区别
//b.html
<body>
<script>
//data:消息
//origin:消息来源地址
//source:源DOMWindow 对象
window.onmessage =function (e){
console.log(e.data);
e.source.postMessage('不要脸',e.origin);
}
</script>
</body>
