## 瀏覽器同源策略 ### 同源條件 協議相同，域名相同，端口相同 ### 非同源下的行為限制 - Cookie、LocalStorage 和 IndexDB 無法讀取。 - DOM 無法獲得。 - AJAX 請求不能發送。 由于同源策略的限制，XmlHttpRequest只允許請求當前源（域名、協議、端口）的資源， ## 解決方法 ### JSONP： 原理是：動態插入script標簽，通過script標簽引入一個js文件，這個js文件載入成功后會執行我們在url參數中指定的函數，并且會把我們需要的json數據作為參數傳入。 ```js function addScriptTag(src) { var script = document.createElement('script'); script.setAttribute("type","text/javascript"); script.src = src; document.body.appendChild(script); } window.onload = function () { addScriptTag('http://example.com/ip?callback=foo'); } function foo(data) { console.log('Your public IP address is: ' + data.ip); }; ``` 優點是兼容性好，簡單易用，支持瀏覽器與服務器雙向通信。缺點是只支持GET請求。 ### CORS 服務器端對于CORS的支持，主要就是通過設置Access-Control-Allow-Origin來進行的。如果瀏覽器檢測到相應的設置，就可以允許Ajax進行跨域的訪問。 ### websocket ### 通過修改document.domain來跨子域 將子域和主域的document.domain設為同一個主域.前提條件：這兩個域名必須屬于同一個基礎域名!而且所用的協議，端口都要一致，否則無法利用document.domain進行跨域 主域相同的使用document.domain ### 使用window.name來進行跨域 window對象有個name屬性，該屬性有個特征：即在一個窗口(window)的生命周期內,窗口載入的所有的頁面都是共享一個window.name的，每個頁面對window.name都有讀寫的權限，window.name是持久存在一個窗口載入過的所有頁面中的 ### 使用HTML5中新引進的window.postMessage方法來跨域傳送數據 ### flash ### 在服務器上設置代理頁面等跨域方式 * * * * * ##### 參考鏈接 [瀏覽器同源政策及其規避方法](http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html) [跨域資源共享 CORS 詳解](http://www.ruanyifeng.com/blog/2016/04/cors.html)