前端跨域方式總結

前言
在前端開發過程當中,最常作的事情就是跟後端完成數據的傳輸,在衆多經典的數據傳輸方式中,有一種不太經常使用可是又比較重要的方式,即跨域請求數據.
什麼是跨域
說到跨域,首先就要提到一個前端的安全概念,即瀏覽器的同源策略.
簡單來講,就是瀏覽器爲了保證用戶信息的安全，防止惡意的網站竊取數據,只容許同源的js腳本操做本頁面。
那若是咱們須要在同一個頁面中請求非同源的數據怎麼辦呢？這個就涉及到跨域問題了。
什麼是同源
同源須要同時知足如下三個條件：

1. 協議相同
2. 域名相同
3. 端口相同
注意：父域名同樣，子域名不同也是非同源的。

同源限制
若是非同源,如下三種行爲將受到限制:
（1） Cookie、LocalStorage 和 IndexDB 沒法讀取。
（2） DOM 沒法得到。
（3） AJAX 請求不能發送。

跨域方法

1. JSONP
這是一種最經常使用也是支持度比較高的跨域方式，其原理動態插入`script`標籤，經過`script`標籤引入一個`js`文件，這個js文件載入成功後會執行咱們在url參數中指定的函數，而且會把咱們須要的`json`數據做爲參數傳入。

優勢是兼容性好，簡單易用，支持瀏覽器與服務器雙向通訊。缺點是隻支持GET請求。

2. CORS

服務器端對於`CORS`的支持，主要就是經過設置`Access-Control-Allow-Origin`來進行的。若是瀏覽器檢測到相應的設置，就能夠容許`Ajax`進行跨域的訪問。
以上兩種方式主要用來跟後臺數據交互.

3. 經過修改document.domain來跨子域

將子域和主域的`document.domain`設爲同一個主域.前提條件：這兩個域名必須屬於同一個基礎域名!並且所用的協議，端口都要一致，不然沒法利用`document.domain`進行跨域
主域相同的使用`document.domain`
此方法能夠用來解決跨域cookie本地存儲的跨域訪問,LocalStorage 和 IndexDB 沒法經過這種方法，規避同源政策，而要使用下文介紹的PostMessage API。

4. 使用window.name來進行跨域
`window`對象有個`name`屬性，該屬性有個特徵：即在一個窗口(window)的生命週期內,窗口載入的全部的頁面都是共享一個`window.name`的，每一個頁面對`window.name`都有讀寫的權限，`window.name`是持久存在一個窗口載入過的全部頁面中的
以上兩種主要用在 使用`iframe來實現頁面結構的頁面.完成DOM之間的跨域交互.

5. 使用HTML5中新引進的`window.postMessage`方法來跨域傳送數據
該方法容許跨窗口通訊，不論這兩個窗口是否同源。
方法的第一個參數是具體的信息內容，第二個參數是接收消息的窗口的源（origin），即"協議 + 域名 + 端口"。也能夠設爲*，表示不限制域名，向全部窗口發送。
postMessage/addEventListener 基本相似於一個全局的事件管理器.能夠經過這兩個接口來發送/監聽 事件,從而完成信息交互.

參考連接:

http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.htmlhttp://www.ruanyifeng.com/blog/2016/04/cors.html