瀏覽器的同源策略的目的是爲了確保用戶的信息安全，防止用戶的數據被竊取。html
每當客戶端向服務器端發送請求時，請求都會攜帶cookie發送給服務器，cookie中包含着用戶信息（這裏又涉及到cookie的知識，cookie的做用有哪些呢？），web
若是沒有同源限制，用戶的信息就能夠被隨便發送到某個服務器。ajax
什麼是同源呢？json
協議+端口+域名 都相同的頁面就是同源的。api
瀏覽器的同源策略有哪些限制呢？跨域
不一樣源之間的頁面有三個限制：瀏覽器
一、cookie、localStorage、indexDB不能共享安全
二、dom不能獲取服務器
三、ajax請求不能發送websocket
何時須要規避同源限制呢？
不一樣的源的網頁之間須要相互跳轉連接，有時甚至還要傳遞數據。
好比實際場景中的一個例子，舊項目由於寫的太爛，咱們建了一個新項目準備去重構舊的項目，可是由於如今業務太多，咱們暫時沒有時間將舊項目中的代碼所有遷移到新的項目裏面，咱們不可能再在舊的項目裏面去寫新的需求，因此新的需求咱們要在新的項目裏面作，而後在徹底重構好舊的項目到新的項目裏面以前，咱們都要將新寫的需求的模塊用iframe的方式嵌入到舊項目裏。兩個不一樣的項目的域名和端口都是不同的，因此須要對跨域進行處理。
如何規避同源策略呢？
一、規避cookie不能共享的問題
cookie只能在同源的網頁中共享，若是二級域名不一樣，一級域名相同，能夠給網頁設置document.domain的值爲這個相同的一級域名，cookie就能夠共享
（能夠詳細瞭解cookie的特色）
二、規避不能拿到dom
好比一個頁面中經過iframe嵌入另外一頁面，且這兩個頁面是不一樣源的，那麼若是想在父窗口獲取子窗口中dom，是不能拿到的。
一級域名相同，二級域名不一樣，能夠經過設置document.domain來解決跨域問題。
徹底不一樣的源解決跨域窗口通訊問題：
一、片斷標識符
將須要跨窗口傳遞的值設置在url的#後面，由於改變url的#的值時，頁面不會刷新。
在接受數據的子頁面，經過window.onhaschange事件監聽來獲取到數據。
二、window.name
不管是否同源，只要是在同一窗口，網頁就能夠讀取到window.name。
容量大能夠放很長的字符串。
可是須要監聽子頁面的window.name的變化，影響網頁性能。
三、postMessage（跨文檔通訊api）
經過postMessage給指定域的網頁發送消息，接受數據的頁面經過message事件去獲取消息。
這個方法能夠還能夠跨域訪問localstroge中的數據。
三、Ajax不能跨域請求
一、JSONP
jsonp的本質是利用script標籤去跳轉url，由於script標籤沒有同源的限制，而後在url上帶上一個函數回調參數。數據經過這個函數回調參數來傳遞。
二、Websocket
利用websocket來實現通訊，由於websocket協議沒有同源策略的限制。
三、Cors
經過跨域資源分享，在服務器端響應頭部設置跨域的範圍。
cors和jsonp的區別是，jsonp只能發get請求，可是cors支持任何類型的請求。
參考資料：
同源策略及規避策略：http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html
postMessage： https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage