1.网络模型数据处理过程
2.域名的空间结构
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>