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

时间 2019-11-06

标签前端必须懂的计算机网络知识代理本地存储繁體版

原文原文链接

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

网络模型数据处理过程

域名的空间结构：

因为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 的同源检测举例：html

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

跨域的解决方案

jsonp：只支持GET，不支持POST请求，不安全XSS
postMessage：配合使用iframe，须要兼容IE六、七、八、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:%E8%B7%A8%E5%9F%9F},
    cb:'show'}).then(data=>{
        console.log(data)    
    })
复制代码

输入https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=%E8%B7%A8%E5%9F%9F&&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" 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 (IE八、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" onload="load()"></iframe>
    <script>
        document.domain = 'kongbz.com';//设置domain
        function load(){
            let frame = document.getElementById('frame');
            console.log(frame.contentWindow.a)
        }
    </script>
</body>
复制代码

<body>
    hellob
    <script>
        document.domain = 'kongbz.com';//设置domain
        var a = 'isB'
    </script>
</body>
复制代码

websocket

客户端发送信息给服务端，若是想实现客户端向客户端通讯，只能经过页面->服务端->另外一个页面nginx

//客户端
<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，设置以后还能服务器才能接受cookie
    res.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.jsongit

//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即互联网技术，从事的工做和网络有很大的关系，前端要负责和后台(服务器)进行交互，其必然得通过网络，因此懂点网络知识有很大的帮助。接下来会介绍：github

TCP
HTTP
HTTPS