想必解除JS的人不少聽到同源策略這個詞，今天我們就來總結(jié)一波。

什么是同源策略呢？

同源策略是指從一個源加載的文檔或腳本如何與來自另一個源的資源進行交互。這是瀏覽器用來隔離潛在惡意文件的關鍵安全機制。
簡單來說：協(xié)議、域名、端口、屬同源，有一個不相同就是不同源，不同源之間的數(shù)據(jù)交互是被限制的，一切為了安全。

跨源的情況表現(xiàn)有以下幾點：
1、cookie、localStorage和IndexDB無法讀取。
2、DOM無法獲得。
3、AJAX請求不能發(fā)送。

前后端是如何通信的呢？

以下幾點保障了前后端的正常通信：
1、AJAX 同源通信
2、WebSocket 不受同源策略影響
3、CORS 支持同源也支持跨域

說到這會兒，就不得不提一下，同源策略帶來的一個非常大的問題。
因為限制了不同源之間的數(shù)據(jù)交互，但是又不能不讓他們交互。畢竟實際工作中，不同域之間的數(shù)據(jù)交互還是很有必要的。
所以就出現(xiàn)了跨域通信。

什么是跨域？為什么會出現(xiàn)跨域？

跨域是指從一個域名去請求另一個域名的資源，嚴格來說，只要協(xié)議、域名、端口、任何一個不同，就會被當做跨域。
為什么會出現(xiàn)跨域呢？還是因為上面說到的同源策略，當頁面在執(zhí)行一個腳本的時候，會檢查訪問的資源是不是同源，不同源，就報錯。
實際開發(fā)中經(jīng)常有跨域的情況，因為項目不同，會有很多子域名，各個項目和網(wǎng)站之間需要相互調(diào)用對方的資源，避免不了跨域請求。

能跨域的標簽有哪些？

有兩個神奇的標簽，不受同源策略影響。
1、<img />
2、<script></script>
這兩個標簽是唯二兩個例外，他們可以不受限制的從其他域加載資源。

既然有了跨域，那必定要有解決方法，畢竟，兩個標簽，并不能解決實際開發(fā)中的大部分問題。
所有，又有了下面這個問題。

跨域的解決方案是什么？

1、JSONP
2、Hash
3、PostMessage
4、WebSocked （不受同源策略影響）
5、CORS

值得一提的是JSONP和CORS.

JSONP跨域原理：

它利用了<script>標簽的特性，由服務端返回提前定義好的JS函數(shù)調(diào)用并且將服務端數(shù)據(jù)以該函數(shù)參數(shù)的形式傳遞過來。

CORS跨站點資源共享

他是跨域問題的解決方案之一，并且是官方方案。
其實本質(zhì)上是個升級版的JSONP，利用fetch實現(xiàn)，會在你發(fā)送不同域名，不同子域名，不同端口，不同協(xié)議這幾種HTTP請求是觸發(fā)。