前端必须懂的计算机网络知识—(跨域、代理、本地存储)
生活随笔
收集整理的這篇文章主要介紹了
前端必须懂的计算机网络知识—(跨域、代理、本地存储)
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
前端必須懂的計(jì)算機(jī)網(wǎng)絡(luò)知識系列文章：
- DNS服務(wù)器和跨域問題
- 計(jì)算機(jī)網(wǎng)絡(luò)的分層模型
- IP地址和MAC地址
- 前端必須懂的計(jì)算機(jī)網(wǎng)絡(luò)知識—(跨域、代理、本地存儲)
- 前端必須懂的計(jì)算機(jī)網(wǎng)絡(luò)知識—(TCP)
- 前端必須懂的計(jì)算機(jī)網(wǎng)絡(luò)知識—(HTTP)
- 前端必須懂的計(jì)算機(jī)網(wǎng)絡(luò)知識—(XSS、CSRF和HTTPS)
網(wǎng)絡(luò)模型數(shù)據(jù)處理過程
域名的空間結(jié)構(gòu)：
由于IP地址不方便記憶，所以同樣用具有層次和唯一性的域名和IP一一映射DNS查找過程
同源策略和跨域
瀏覽器只對網(wǎng)絡(luò)請求有同源限制，同源就是協(xié)議、域名和端口號一致，不同源的客戶端腳本在沒有明確授權(quán)的情況下，不能讀寫對方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 ----失敗，協(xié)議不同（https）
- http://www.a.com:8080/test/index.html ----失敗，端口號不同
跨域的解決方案
- jsonp：只支持GET，不支持POST請求，不安全XSS
- postMessage：配合使用iframe，需要兼容IE6、7、8、9
- document.domain：僅限于同一域名下的子域
- cors：需要后臺配合進(jìn)行相關(guān)的設(shè)置
- websocket：需要后臺配合修改協(xié)議，不兼容，需要使用socket.io
- proxy：使用代理去避開跨域請求，需要修改nginx、apache等的配置
jsonp
- 瀏覽器對script標(biāo)簽src屬性、link標(biāo)簽ref屬性和img標(biāo)簽src屬性沒有同源策略限制，利用這個(gè)“漏洞”就可以很好的解決跨域請求，JSONP就是利用了script標(biāo)簽無同源限制的特點(diǎn)來實(shí)現(xiàn)的。
- 當(dāng)向第三方站點(diǎn)請求時(shí)，我們可以將此請求放在script標(biāo)簽的src屬性里，這就如同請求一個(gè)普通的JS腳本，可以自由的向不同的站點(diǎn)請求。
postMessage
配合iframes使用，假設(shè)a.html位于服務(wù)localhost:3000，b.html位于服務(wù)器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:指目標(biāo)窗口，也就是給哪個(gè)window發(fā)消息，是 window.frames 屬性的成員或者由 window.open 方法創(chuàng)建的窗口 //message:是要發(fā)送的消息，類型為 String、Object (IE8、9 不支持) //targetOrigin: 是限定消息接收范圍，不限制請使用'*' //注意otherWindow和targetOrigin的區(qū)別 //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';//設(shè)置domainfunction load(){let frame = document.getElementById('frame');console.log(frame.contentWindow.a)}</script> </body> <body>hellob<script>document.domain = 'kongbz.com';//設(shè)置domainvar a = 'isB'</script> </body>websocket
客戶端發(fā)送信息給服務(wù)端，如果想實(shí)現(xiàn)客戶端向客戶端通信，只能通過頁面->服務(wù)端->另一個(gè)頁面
//客戶端 <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> //服務(wù)端 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", "*");//允許攜帶哪個(gè)頭訪問，不設(shè)置不能攜帶參數(shù)res.header("Access-Control-Allow-Headers","ContentType");//允許的方法，不設(shè)置默認(rèn)支持GET、HEAD、POST，其他類型必須設(shè)置才能處理請求res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");//運(yùn)行攜帶cookie，設(shè)置之后還能服務(wù)器才能接受cookieres.header("Access-Control-Allow-Credentials",true);//允許前端獲取哪個(gè)頭，不設(shè)置瀏覽器不能解析后臺返回的參數(shù)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頁面去調(diào)用test.b.cn/service.json
//nginx.conf location / {root;index index.html index.htm; } location ~.*\.json {root json;add_header "Access-Control-Allow-Origin" "*"; }代理和網(wǎng)關(guān)
- 代理是一種有轉(zhuǎn)發(fā)功能的應(yīng)用程序，它扮演了位于服務(wù)器和客戶端'中間人'的角色，接收客戶端發(fā)送的請求不改變請求的URI并轉(zhuǎn)發(fā)給服務(wù)器，同時(shí)也接收服務(wù)器返回的相應(yīng)并轉(zhuǎn)發(fā)客戶端
- 緩存代理：代理轉(zhuǎn)發(fā)響應(yīng)時(shí)會預(yù)先將資源緩存在代理服務(wù)器上當(dāng)代理再次接收到對相同資源的請求時(shí)，就可以不從源服務(wù)器那里獲取資源，而是將之前緩存的資源作為響應(yīng)返回
- 透明代理：轉(zhuǎn)發(fā)請求或響應(yīng)時(shí)，不對報(bào)文做任何加工的代理類型
- 網(wǎng)關(guān)是轉(zhuǎn)發(fā)其他服務(wù)器通信數(shù)據(jù)的服務(wù)器，接收從客戶端發(fā)送來的請求時(shí)，它就像自己擁有資源的源服務(wù)器一樣對請求進(jìn)行處理，其工作機(jī)制和代理類似，而網(wǎng)關(guān)能使通信線路上的服務(wù)器提供非HTTP協(xié)議的服務(wù)。
反向代理
- 大家都有過這樣的經(jīng)歷，撥打10086客服電話，可能一個(gè)地區(qū)的10086客服有幾個(gè)或者幾十個(gè)，你永遠(yuǎn)都不需要關(guān)心在電話那頭的是哪一個(gè)，叫什么，男的，還是女的，漂亮的還是帥氣的，你都不關(guān)心，你關(guān)心的是你的問題能不能得到專業(yè)的解答，你只需要撥通了10086的總機(jī)號碼，電話那頭總會有人會回答你，只是有時(shí)慢有時(shí)快而已。那么這里的10086總機(jī)號碼就是我們說的反向代理。客戶不知道真正提供服務(wù)人的是誰。
- 反向代理隱藏了真實(shí)的服務(wù)端，當(dāng)我們請求 www.baidu.com 的時(shí)候，就像撥打10086一樣，背后可能有成千上萬臺服務(wù)器為我們服務(wù)，但具體是哪一臺，你不知道，也不需要知道，你只需要知道反向代理服務(wù)器是誰就好了，www.baidu.com 就是我們的反向代理服務(wù)器，反向代理服務(wù)器會幫我們把請求轉(zhuǎn)發(fā)到真實(shí)的服務(wù)器那里去。Nginx就是性能非常好的反向代理服務(wù)器，用來做負(fù)載均衡。
負(fù)載均衡和動靜分離
- 負(fù)載均衡是反向代理的一種，后端多臺服務(wù)器，nginx根據(jù)權(quán)重、壓力、帶寬的分配服務(wù)器，避免等待和擁塞
- 動靜分離是反向代理的一種，后端服務(wù)器分為動態(tài)資源服務(wù)器和靜態(tài)資源服務(wù)器，nginx會根據(jù)請求分配服務(wù)器，區(qū)分處理邏輯，加快響應(yīng)
cookie、localstroage、sessionstroage的區(qū)別
- Cookie適合存儲一些session信息：
- cookie限制大小，約4k左右，不適合存儲業(yè)務(wù)數(shù)據(jù)，尤其是數(shù)據(jù)量較大的值
- 存在有效期，到期自動銷毀
- cookie會每次隨http請求一起發(fā)送，浪費(fèi)寬
- cookie設(shè)置了domain可以在子域共享跨域
- 可以使用爬蟲抓取
- localstroage適合存儲應(yīng)用共享的地址信息等：
- 存儲數(shù)據(jù)量大，5M或者更大
- 有效期為永久
- 不會隨http請求一起發(fā)送
- 不能跨域，但是可以使用postMessage和iframe消除這個(gè)影響,例如：cross-storage
- 在瀏覽器的隱私模式下不能讀取
- 不能被爬蟲讀取
- sessionstroage適合存儲瀏覽狀態(tài)等：
- 存儲數(shù)據(jù)量大，5M或者更大
- 有效期為到瀏覽器關(guān)閉
- 不會隨http請求一起發(fā)送
- 不能被爬蟲讀取
結(jié)語
IT即互聯(lián)網(wǎng)技術(shù)，從事的工作和網(wǎng)絡(luò)有很大的關(guān)系，前端要負(fù)責(zé)和后臺(服務(wù)器)進(jìn)行交互，其必然得經(jīng)過網(wǎng)絡(luò)，所以懂點(diǎn)網(wǎng)絡(luò)知識有很大的幫助。接下來會介紹：
- TCP
- HTTP
- HTTPS
總結(jié)
以上是生活随笔為你收集整理的前端必须懂的计算机网络知识—(跨域、代理、本地存储)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 让 Chrome 崩溃的一行 CSS 代
- 下一篇： 前端解读面向切面编程(AOP)