1、瀏覽器的同源安全策略

沒錯，就是這傢伙乾的，瀏覽器只允許請求當前域的資源，而對其他域的資源表示不信任。那怎麼才算跨域呢？

1. 請求協議http,https的不同
2. 域domain的不同
3. 埠port的不同

好好好，大概就是這麼回事啦，下面我們講2種中規中矩的辦法：CORS，JSONP
document.domain，window.name，web sockets就先別鬧了，腰不好 : )

2、CORS出來搞事了

這是W3C的大佬們搞出來的標準，全稱是"跨域資源共享"（Cross-origin resource sharing）。其實呢，這個大部分還是後端人員的工作。我們先來看看整個流程下，都發生了什麼？

在此之前，需要知道簡單請求 複雜請求這兩個小朋友

1. 簡單請求：
   1): 請求方式只能是：head，get，post
   2): 請求頭允許的欄位：Accept，Accept-Language，Content-Language，Last-Event-ID
Content-Type：application/x-www-form-urlencoded、multipart/form-data、text/plain 三選一

2.複雜請求：沒錯，不滿足上面的，都是我啦！

簡單請求:

瀏覽器：誒，你小子要跨域是吧，我得問問伺服器大哥肯不肯！往請求頭新增origin亮一下牌面

有個奇怪現象，谷歌遊覽器在非跨域情況下，也會發送origin欄位

伺服器：誒，你是誰，我來看看你的origin，嗯嗯，可以，符合我的要求，放行！順便告訴你，老夫的規矩！

//指定允許其他域名訪問
'Access-Control-Allow-Origin:http://172.20.0.206'//一般用法（*，指定域，動態設定），3是因為*不允許攜帶認證頭和cookies
//是否允許後續請求攜帶認證資訊（cookies）,該值只能是true,否則不返回
'Access-Control-Allow-Credentials:true'
 

上面第一行說到的Access-Control-Allow-Origin有多種設定方法：

1. 設定*是最簡單粗暴的，但是伺服器出於安全考慮，肯定不會這麼幹，而且，如果是*的話，遊覽器將不會發送cookies，即使你的XHR設定了withCredentials
2. 指定域，如上圖中的http://172.20.0.206，一般的系統中間都有一個nginx，所以推薦這種
3. 動態設定為請求域，多人協作時，多個前端對接一個後臺，這樣很方便

withCredentials：表示XHR是否接收cookies和傳送cookies，也就是說如果該值是false，響應頭的Set-Cookie，瀏覽器也不會理，並且即使有目標站點的cookies，瀏覽器也不會發送。

複雜請求:

最常見的情況，當我們使用put和delete請求時，瀏覽器會先發送option（預檢）請求，不過有時候，你會發現並沒有，這是後面我們會講到快取。

預檢請求

與簡單請求不同的是，option請求多了2個欄位：
Access-Control-Request-Method：該次請求的請求方式
Access-Control-Request-Headers：該次請求的自定義請求頭欄位

伺服器檢查通過後，做出響應：

//指定允許其他域名訪問
'Access-Control-Allow-Origin:http://172.20.0.206'//一般用法（*，指定域，動態設定），3是因為*不允許攜帶認證頭和cookies
//是否允許後續請求攜帶認證資訊（cookies）,該值只能是true,否則不返回
'Access-Control-Allow-Credentials:true'
//預檢結果快取時間,也就是上面說到的快取啦
'Access-Control-Max-Age: 1800'
//允許的請求型別
'Access-Control-Allow-Methods:GET,POST,PUT,POST'
//允許的請求頭欄位
'Access-Control-Allow-Headers:x-requested-with,content-type'

這裡有個注意點：Access-Control-Request-Method，Access-Control-Request-Headers返回的是滿足伺服器要求的所有請求方式，請求頭，不限於該次請求，我一次性告訴你了，別TM問我了

3、大家好，我是渣渣輝，是兄dei就來...呸呸呸，我是JSONP

好啦，jsonp的原理：通過script標籤引入一個js檔案，這個js檔案載入成功後會執行我們在url引數中指定的函式，並且會把我們需要的json資料作為引數傳入，有種回撥的味道！

例子：

<script src="http://example.com/data.php?callback=dosomething"></script>

<script type="text/javascript">
    function dosomething(jsondata){
        //處理獲得的json資料
    }
</script>

jquery用法

<script type="text/javascript">
    $.getJSON('http://example.com/data.php?callback=?,function(jsondata)'){
        //處理獲得的json資料
    };
</script>

JSONP的優缺點
優點：它不像XMLHttpRequest物件實現的Ajax請求那樣受到同源策略的限制；它的相容性更好，在更加古老的瀏覽器中都可以執行，不需要XMLHttpRequest或ActiveX的支援；並且在請求完畢後可以通過呼叫callback的方式回傳結果。

缺點：它只支援GET請求而不支援POST等其它型別的HTTP請求；它只支援跨域HTTP請求這種情況，不能解決不同域的兩個頁面之間如何進行JavaScript呼叫的問題。

好啦，大概就是這個樣子啦，本文中大部分思路取自阮一峰老師 跨域資源共享 CORS 詳解，當初學習的時候，也是看阮一峰老師的文章。