一、什么是跨域
我們先回顧一下域名地址的組成：
http:// www . google : 8080 / script/jquery.js
http:// （協議號）
www （子域名）
google （主域名）
8080 （端口號）
script/jquery.js （請求的地址）
* 當協議、子域名、主域名、端口號中任意一各不相同時，都算不同的“域”。
* 不同的域之間相互請求資源，就叫“跨域”。
比如：http://www.abc.com/index.html 請求 http://www.def.com/sever.php
二、處理跨域的方法1 -- 代理（這個方法比較“笨” 故不做詳細介紹）
比如在北京（www.beijing.com/sever.php）和上海（www.shanghai.com/sever.php）各有一個服務器，北京的后端（www.beijing.com/sever.php）直接訪問上海的服務，然后把獲取的響應值返回給前端。也就是北京的服務在后台做了一個代理，前端只需要訪問北京的服務器也就相當與訪問了上海的服務器。這種代理屬於后台的技術，所以不展開敘述。
三、處理跨域的方法2 -- JSONP
假設在http://www.aaa.com/index.php這個頁面中向http://www.bbb.com/getinfo.php提交GET請求，那么我們在www.aaa.com頁面中添加如下代碼：
|
1
2
3
4
5
6
7
|
var
eleScript= document.createElement(
"script"
);
//創建一個script元素
eleScript.type =
"text/javascript"
;
//聲明類型、
document.getElementsByTagName(
"HEAD"
)[0].appendChild(eleScript);
//在頁面中添加新創建的script元素
|
當GET請求從http://www.bbb.com/getinfo.php返回時，可以返回一段JavaScript代碼，這段代碼會自動執行，可以用來負責調用http://www.aaa.com/index.php頁面中的一個callback函數。看下面一個列子：
在www.aaa.com頁面中：
|
1
2
3
4
5
6
7
8
9
10
11
|
<script>
function
jsonp( json ){
document.write( json.name );
//輸出周星馳
}
<script>
|
在www.bbb.com頁面中：
jsonp({ "name":"周星馳","age":45 });
也就是在www.aaa.com頁面中聲明，在www.bbb.com頁面中調用。但是JSONP只支持 “GET” 請求，但不支持 “POST” 請求。
三、處理跨域的方法2 -- XHR2（推薦方法）
“XHR2” 全稱 “XMLHttpRequest Level2” 是HTML5提供的方法，對跨域訪問提供了很好的支持，並且還有一些新的功能。
* IE10一下的版本都不支持
* 只需要在服務器端頭部加上下面兩句代碼：
header( "Access-Control-Allow-Origin:*" );
header( "Access-Control-Allow-Methods:POST,GET" );
關於 “XHR2” 的更多信息大家可以查看官方文檔，在這里就不詳細敘述了，總之這是這個很好用的方法。
以上所述就是本文的全部內容了，希望大家能夠喜歡。