前端必须懂的计算机网络知识—(跨域、代理、本地存储)

前端必须懂的计算机网络知识系列文章：

DNS服务器和跨域问题
计算机网络的分层模型
IP地址和MAC地址
前端必须懂的计算机网络知识—(跨域、代理、本地存储)
前端必须懂的计算机网络知识—(TCP)
前端必须懂的计算机网络知识—(HTTP)
前端必须懂的计算机网络知识—(XSS、CSRF和HTTPS)

网络模型数据处理过程

域名的空间结构：

由于IP地址不方便记忆，所以同样用具有层次和唯一性的域名和IP一一映射

DNS查找过程

客户端向本地域名服务器发出请求，请求www.baidu.com的IP地址
本地DNS服务器向DNS根服务器发出请求，根DNS服务器会告诉本地服务器(.com)的服务器地址
本地DNS服务器会向(.com域)发请求，会得到(baidu.com)的服务器地址
本地DNS服务器会向(baidu.com)发请求,会得到(www.baidu.com)的IP地址61.135.169.125
本地DNS服务器向客户端回复域名(www.baidu.com)对应的IP地址是61.135.169.125

同源策略和跨域

浏览器只对网络请求有同源限制，同源就是协议、域名和端口号一致，不同源的客户端脚本在没有明确授权的情况下，不能读写对方XHR资源，反之不同源脚本读取对方XHR资源就是跨域。以http://www.a.com/test/index.html 的同源检测举例：

http://www.a.com/dir/page.html ----成功
http://child.a.com/test/index.html ----失败，域名不同
https://www.a.com/test/index.html ----失败，协议不同（https）
http://www.a.com:8080/test/index.html ----失败，端口号不同

跨域的解决方案

jsonp：只支持GET，不支持POST请求，不安全XSS
postMessage：配合使用iframe，需要兼容IE6、7、8、9
document.domain：仅限于同一域名下的子域
cors：需要后台配合进行相关的设置
websocket：需要后台配合修改协议，不兼容，需要使用socket.io
proxy：使用代理去避开跨域请求，需要修改nginx、apache等的配置

jsonp

浏览器对script标签src属性、link标签ref属性和img标签src属性没有同源策略限制，利用这个“漏洞”就可以很好的解决跨域请求，JSONP就是利用了script标签无同源限制的特点来实现的。
当向第三方站点请求时，我们可以将此请求放在script标签的src属性里，这就如同请求一个普通的JS脚本，可以自由的向不同的站点请求。

//创建script发送请求
//请求返回执行cb函数，并且删除创建的script
//类似于$ajax中的jsonp
function jsonp(url,params,cb){return new Promimse((resolve,reject)=>{window[cb] = function(data){resolve(data);document.body.removeChild(script);}params={...params,cb},let arrs=[];for(let key in params){arrs.push(`${key}=${params[key]}`)}let script = document.createElement('script');script.src= url   '?'  arrs.join('&');document.body.appendChild(script);})
}
jsonp({url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',params:{wd:跨域},cb:'show'}).then(data=>{console.log(data)    })

输入https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=跨域&&cb=show
返回show({q:"跨域",p:false,s:["跨域请求","跨域访问","跨域问题","跨越速运单号查询","跨域ajax","跨越物流","跨越","跨域速运","跨域请求解决方案","跨域问题怎么解决"]});

postMessage

配合iframes使用，假设a.html位于服务localhost:3000，b.html位于服务器localhost:4000

//a.html
<body><iframe id="frame"  src="http://localhost:4000/b.html" frameborder="0" οnlοad="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>

document.domain

//a.html
<body>helloa<iframe id="frame"  src="http://www.kongbz.com/b.html" frameborder="0" οnlοad="load()"></iframe><script>document.domain = 'kongbz.com';//设置domainfunction load(){let frame = document.getElementById('frame');console.log(frame.contentWindow.a)}</script>
</body>

<body>hellob<script>document.domain = 'kongbz.com';//设置domainvar a = 'isB'</script>
</body>

websocket

客户端发送信息给服务端，如果想实现客户端向客户端通信，只能通过页面->服务端->另一个页面

//客户端
<body>hellob<script>let socket = new WebSocket('ws://localhost:3000');socket.onopen = function(){socket.send('我很帅')}socket.onmessage = function(e){console.log(e.data)}</script>
</body>

//服务端
let express = require('express');
let Websocket = require('wss');
let wss= new WebSocket.Server({port:3000})
wss.on('connection',function(ws){ws.on('message',function(data){console.log(data);ws.send('不要脸');})
})
let app = new express();
app.listen(3000)

cors

const http = require('http')
const whitList = ['http://localhost:4000'];
http.createServer(function (req, res) {let origin = req.headers.origin;//在白名单中的域名才能访问if(whitList.includes(origin)){//允许的域名(* 所有域)，*不能和Access-Control-Allow-Credentials一起使用res.header("Access-Control-Allow-Origin", "*");//允许携带哪个头访问，不设置不能携带参数res.header("Access-Control-Allow-Headers","ContentType");//允许的方法，不设置默认支持GET、HEAD、POST，其他类型必须设置才能处理请求res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");//运行携带cookie，设置之后还能服务器才能接受cookieres.header("Access-Control-Allow-Credentials",true);//允许前端获取哪个头，不设置浏览器不能解析后台返回的参数res.header("Access-Control-Allow-Expose-Headers",'ContentType');if(req.method=== 'OPTIONS'){res.end()}}
}).listen(9000, function () {console.log('server is runing at 9000')
})

proxy

例如test.a.cn/index.html页面去调用test.b.cn/service.json

//nginx.conf
location / {root;index index.html index.htm;
}
location ~.*\.json {root json;add_header "Access-Control-Allow-Origin" "*";
}

代理和网关

代理是一种有转发功能的应用程序，它扮演了位于服务器和客户端'中间人'的角色，接收客户端发送的请求不改变请求的URI并转发给服务器，同时也接收服务器返回的相应并转发客户端
缓存代理：代理转发响应时会预先将资源缓存在代理服务器上当代理再次接收到对相同资源的请求时，就可以不从源服务器那里获取资源，而是将之前缓存的资源作为响应返回
透明代理：转发请求或响应时，不对报文做任何加工的代理类型
网关是转发其他服务器通信数据的服务器，接收从客户端发送来的请求时，它就像自己拥有资源的源服务器一样对请求进行处理，其工作机制和代理类似，而网关能使通信线路上的服务器提供非HTTP协议的服务。

反向代理

大家都有过这样的经历，拨打10086客服电话，可能一个地区的10086客服有几个或者几十个，你永远都不需要关心在电话那头的是哪一个，叫什么，男的，还是女的，漂亮的还是帅气的，你都不关心，你关心的是你的问题能不能得到专业的解答，你只需要拨通了10086的总机号码，电话那头总会有人会回答你，只是有时慢有时快而已。那么这里的10086总机号码就是我们说的反向代理。客户不知道真正提供服务人的是谁。
反向代理隐藏了真实的服务端，当我们请求 www.baidu.com 的时候，就像拨打10086一样，背后可能有成千上万台服务器为我们服务，但具体是哪一台，你不知道，也不需要知道，你只需要知道反向代理服务器是谁就好了，www.baidu.com 就是我们的反向代理服务器，反向代理服务器会帮我们把请求转发到真实的服务器那里去。Nginx就是性能非常好的反向代理服务器，用来做负载均衡。

负载均衡和动静分离

负载均衡是反向代理的一种，后端多台服务器，nginx根据权重、压力、带宽的分配服务器，避免等待和拥塞
动静分离是反向代理的一种，后端服务器分为动态资源服务器和静态资源服务器，nginx会根据请求分配服务器，区分处理逻辑，加快响应

cookie、localstroage、sessionstroage的区别

Cookie适合存储一些session信息：
1. cookie限制大小，约4k左右，不适合存储业务数据，尤其是数据量较大的值
2. 存在有效期，到期自动销毁
3. cookie会每次随http请求一起发送，浪费宽
4. cookie设置了domain可以在子域共享跨域
5. 可以使用爬虫抓取
localstroage适合存储应用共享的地址信息等：
1. 存储数据量大，5M或者更大
2. 有效期为永久
3. 不会随http请求一起发送
4. 不能跨域，但是可以使用postMessage和iframe消除这个影响,例如：cross-storage
5. 在浏览器的隐私模式下不能读取
6. 不能被爬虫读取
sessionstroage适合存储浏览状态等：
1. 存储数据量大，5M或者更大
2. 有效期为到浏览器关闭
3. 不会随http请求一起发送
4. 不能被爬虫读取

结语

IT即互联网技术，从事的工作和网络有很大的关系，前端要负责和后台(服务器)进行交互，其必然得经过网络，所以懂点网络知识有很大的帮助。接下来会介绍：

TCP
HTTP
HTTPS

前端必须懂的计算机网络知识—(跨域、代理、本地存储)相关推荐

前端必须懂的计算机网络知识—(跨域、代理、本地存储)（掘金）
1.同源策略与跨域:浏览器只对网络请求有同源限制,同源就是协议.域名和端口号一致,不同源的客户端脚本在没有明确授权的情况下,不能读写对方XHR资源,反之不同源脚本读取对方XHR资源就是跨域. 转载于: ...
前端必须懂的计算机网络知识—(XSS、CSRF和HTTPS)
前端必须懂的计算机网络知识系列文章: DNS服务器和跨域问题计算机网络的分层模型 IP地址和MAC地址前端必须懂的计算机网络知识-(跨域.代理.本地存储) 前端必须懂的计算机网络知识-(TCP) ...
前端需要了解的计算机网络知识，这一篇就够了！(图文并茂，万字长文！)
作者:lio-mengxiang 原文链接:https://juejin.im/post/5e51febde51d4526c932b390 本文主要目的也是为了非科班前端补充计算机科班基础知识,比如你 ...
前端面试查漏补缺--(三) 跨域及常见解决办法
前言本系列最开始是为了自己面试准备的.后来发现整理越来越多,差不多有十二万字符,最后决定还是分享出来给大家. 为了分享整理出来,花费了自己大量的时间,起码是只自己用的三倍时间.如果喜欢的话,欢迎收藏 ...
vue3.0-axios拦截器、proxy跨域代理
目录 1. vue-cli 1)vue-cli 2)安装vue-cli ①解决Windows PowerShell不识别vue命令的问题 3)创建项目 4)基于vue ui创建vue项目 5)基于命令 ...
vue加跨域代理静态文件404_vue-cli 设置跨域代理线上地址报404
vue-cli 设置跨域代理,本地正常访问,线上地址报404.这是什么原因? vue-cli中跨域代理设置: module.exports = { dev: { // Paths assetsSubD ...
vue-cli设置跨域代理 + 开发/生成环境简单请求接口设置
1.设置dev.proxyTable实现开发环境的跨域代理: 在config文件夹下index.js文件内: 1 module.exports = { 2 dev: { 3 proxyTable: { ...
vue-cli2.x统一配置接口请求地址和开发环境的跨域代理
1.修改config/dev.env.js(开发环境的baseURL地址统一配置) 2.修改config/prod.env.js(线上环境的baseURL地址统一配置) 3.修改config/inde ...
全局配置axios、axios 拦截器和 proxy 跨域代理
目录一.全局配置axios 1. 为什么要全局配置 axios 2. 如何全局配置 axios 3. 在 vue3 的项目中全局配置axios 4. 在 vue2 的项目中全局配置 axios ...