跨域解決方案及實現

摘要：

身爲一個前端，每當別人提起跨域，個人內心還真是虛，當面試官問我瞭解跨域嗎，「瞭解」，解決方案呢，「jsonp或者iframe再或者代理」，好吧這個問題基本涼透了。平常的工做中，咱們不多有機會去涉及配置跨域問題或者說基本沒有，工做三年時間，幹過產品也幹過項目，總體架構都是大佬們配置好的，因而我就開始卡卡累業務流程了，不少問題其實平時都聽過，也知道個大概，可是具體知識點其實很模糊，今天就記錄一下什麼是跨域，跨域的由來，以及什麼是同源策略，爲何有這個東西存在，具體的解決方案是什麼。

什麼是跨域：

跨域字面意思不是同一個域，一個域去請求（獲取）另一個域下的資源，就是跨域。

跨域的由來：

聽到跨域，咱們總能跟一個詞叫同源策略聯繫到一塊兒，由於同源策略纔會出現的跨域的狀況，那麼什麼是同源策略。

同源策略：

同元策略限制了從同一個源加載的文檔或腳本如何與來自另外一個源的資源進行交互。這是一個用於隔離潛在惡意文件的重要安全機制（官方答案，詳見：https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy）。啥意思嘞，就是否是一個域的不讓互相請求，首先這是瀏覽器的一種機制，其次實際上是能夠請求的，可是返回結果被瀏覽器攔截了。瀏覽器從哪些方面作的這個同源策略呢。

（1）針對接口請求（2）針對dom查詢，若是沒有同源策略會怎麼樣呢。

沒有同源策略限制的接口請求：

首先了解下http是無狀態協議，每次請求服務器的時候須要標識，否則服務器不認啊，這就是cookie了，這個cookie固然是服務器頒發並在響應頭Set-Cookie字段返回給瀏覽器的，再次發送的時候迴帶着這個cookie，服務器見到這個cookie就如同見到你這我的，知道兩次都是你乾的。若是這時候再放問另外一個站點呢，瀏覽器會帶着cookie一塊兒訪問，這時候你不註冊，站點也有你的身份了，這個站點若是用着你的cookie乾點別的事兒呢，這就很尷尬了。這種狀況也叫CSFR攻擊方式。

沒有同源策略限制的dom查詢：

1 <iframe name='site_a' src='www.a.com'></iframe>
2 <script>
3     var iframe = window.frames['site_a'];
4     var input = iframe.document.getElementById('input');
5     console.log(`input內容：${input}`);
6 </script>

這個時候咱們能夠拿到site_a的想要的頁面信息。

同源策略具體方案：

1.

未完待續。。。