一、定義

1、什麽是源
? 源（origin）就是協議、域名和端口號。
以上url中的源就是：http://www.company.com:80
若地址裏面的協議、域名和端口號均相同則屬於同源。
以下是相對於 http://www.a.com/test/index.html 的同源檢測
? http://www.a.com/dir/page.html ----成功
? http://www.child.a.com/test/index.html ----失敗，域名不同
? https://www.a.com/test/index.html ----失敗，協議不同
? http://www.a.com:8080/test/index.html ----失敗，端口號不同

2.什麽是同源策略？
同源策略是瀏覽器的一個安全功能，不同源的客戶端腳本在沒有明確授權的情況下，不能讀寫對方資源。所以a.com下的js腳本采用ajax讀取b.com裏面的文件數據是會報錯的。

? 不受同源策略限制的：
1、頁面中的鏈接，重定向以及表單提交是不會受到同源策略限制的。
2、跨域資源的引入是可以的。但是js不能讀寫加載的內容。如嵌入到頁面中的<script src="..."></script>，<img>，<link>，<iframe>等。

二、跨域
1、什麽是跨域
受前面所講的瀏覽器同源策略的影響，不是同源的腳本不能操作其他源下面的對象。想要操作另一個源下的對象是就需要跨域。

2、跨域的實現形式
? 降域 document.domain
同源策略認為域和子域屬於不同的域，如：
child1.a.com 與 a.com，
child1.a.com 與 child2.a.com，
xxx.child1.a.com 與 child1.a.com
兩兩不同源，可以通過設置 document.damain=‘a.com‘，瀏覽器就會認為它們都是同一個源。想要實現以上任意兩個頁面之間的通信，兩個頁面必須都設置documen.damain=‘a.com‘。
此方式的特點：
1. 只能在父域名與子域名之間使用，且將 xxx.child1.a.com域名設置為a.com後，不能再設置成child1.a.com。
2. 存在安全性問題，當一個站點被攻擊後，另一個站點會引起安全漏洞。
3. 這種方法只適用於 Cookie 和 iframe 窗口。

JSONP跨域
JSONP和JSON並沒有什麽關系！
JSONP的原理：（舉例：a.com/jsonp.html想得到b.com/main.js中的數據）在a.com的jsonp.html裏創建一個回調函數xxx，動態添加<script>元素，向服務器發送請求，請求地址後面加上查詢字符串，通過callback參數指定回調函數的名字。請求地址為http://b.com/main.js?callback=xxx。在main.js中調用這個回調函數xxx，並且以JSON數據形式作為參數傳遞，完成回調。

我們來看看代碼：

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://b.com/main.js?callback=foo‘);
?    } //window.onload是為了讓頁面加載完成後再執行
?    function foo(data) { 
?    console.log(data.name+"歡迎您");
?    };

//b.com/main.js中的代碼

foo({name:"hl"})

這樣便實現了跨域的參數傳遞。

采用jsonp跨域也存在問題：
1. 使用這種方法，只要是個網站都可以拿到b.com裏的數據，存在安全性問題。需要網站雙方商議基礎token的身份驗證，這裏不詳述。
2. 只能是GET，不能POST。
3. 可能被註入惡意代碼，篡改頁面內容，可以采用字符串過濾來規避此問題。

CORS
CORS是一個W3C標準，全稱是"跨域資源共享"（Cross-origin resource sharing）。
它允許瀏覽器向跨源服務器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。
剛才的例子中，在b.com裏面添加響應頭聲明允許a.com的訪問，代碼：
Access-Control-Allow-Origin: http://a.com
然後a.com就可以用ajax獲取b.com裏的數據了。
註意：此方法IE8以下完全不支持，IE8-10部分支持。詳見caniuse-CORS
詳細內容請參考：跨域資源共享 CORS 詳解

? 其它方法
1. HTML5的postMessage方法
2. window.name
3. location.hash

同源策略、跨域解決方案