1、瀏覽器的同源安全策略
沒錯，就是這家伙干的，瀏覽器只允許請求當前域的資源，而對其他域的資源表示不信任。那怎么才算跨域呢？
- 請求協議
http,https的不同 - 域
domain的不同 - 端口
port的不同
好好好，大概就是這么回事啦，下面我們講2種中規中矩的辦法：CORS，JSONP
document.domain，window.name，web sockets就先別鬧了，腰不好 : )
2、CORS出來搞事了
這是W3C的大佬們搞出來的標準，全稱是"跨域資源共享"（Cross-origin resource sharing）。其實呢，這個大部分還是后端人員的工作。我們先來看看整個流程下，都發生了什么？
在此之前，需要知道簡單請求 復雜請求這兩個小朋友
- 簡單請求：
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，標識允許哪個域的請求。當然，如果服務器不通過，根本沒有這個字段，接著觸發XHR的onerror，再接著你就看到瀏覽器的提示xxx的服務器沒有響應Access-Control-Allow-Origin字段
//指定允許其他域名訪問
'Access-Control-Allow-Origin:http://172.20.0.206'//一般用法（*，指定域，動態設置），3是因為*不允許攜帶認證頭和cookies
//是否允許后續請求攜帶認證信息（cookies）,該值只能是true,否則不返回
'Access-Control-Allow-Credentials:true'
上面第一行說到的Access-Control-Allow-Origin有多種設置方法：
- 設置
*是最簡單粗暴的，但是服務器出于安全考慮，肯定不會這么干，而且，如果是*的話，游覽器將不會發送cookies，即使你的XHR設置了withCredentials - 指定域，如上圖中的
http://172.20.0.206，一般的系統中間都有一個nginx，所以推薦這種 - 動態設置為請求域，多人協作時，多個前端對接一個后臺，這樣很方便
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 詳解，當初學習的時候，也是看阮一峰老師的文章。
