摘要：跨域源資源共享同源域名端口協(xié)議均相同基本思想是使用自定義的頭部，讓服務(wù)器能聲明允許訪問的來源。簡單請求所有的跨域請求簡單或非簡單總會包含一個的請求頭部由瀏覽器添加不受用戶控制。

同源：域名、端口、協(xié)議均相同
CORS基本思想是使用自定義的HTTP頭部，讓服務(wù)器能聲明允許訪問的來源。
使用CORS時，異步請求會被分為簡單請求(非Preflight)和非簡單請求。

所有的跨域請求(簡單或非簡單)總會包含一個origin的請求頭部,由瀏覽器添加不受用戶控制。值由協(xié)議、域名、端口組成,說明請求的來源。下面為一個Origin頭部示例:

Origin:http://www.hello.com

服務(wù)器接受這個請求,會在響應(yīng)頭Access-Control-Allow-Origin回發(fā)相同的源信息。( * 表明該資源可以被任意外域訪問)

Access-Control-Allow-Origin:http://www.hello.com

非簡單CORS請求會在正式請求之前發(fā)送一次Preflight請求,得到確認之后才會發(fā)送真正的XMLHttpRequest請求。瀏覽器自動處理這兩個請求,并且Preflight請求結(jié)束后,結(jié)果將按照響應(yīng)中指定的時間緩存起來.所以只是第一次發(fā)送這種請求時會多一次HTTP請求.
Preflight請求使用OPTIONS方法,發(fā)送下列頭部:

Origin:與簡單請求相同
Access-Control-Request-Method:請求自身使用的方法

以下是一個帶有自定義頭部Custom-Header的使用POST方法發(fā)送的請求.

Origin:http://www.hello.com
Access-Control-Request-Method:POST
Access-Control-Request-Headers:Custom-Header

var url = "http://www.hello.com";
var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.setRequestHeader("Custom-Header", "value");
xhr.send();

服務(wù)器通過在響應(yīng)中發(fā)送如下頭部與瀏覽器溝通:

Access-Control-Allow-Origin:http://www.hello.com
Access-Control-Allow-Methods:POST,GET
Access-Control-Allow-Headers:Custom-Header
Access-Control-Allow-Max-Age:28000  //表示將Preflight緩存的時長(秒),期間內(nèi)無需再次發(fā)送預(yù)請求

另外通過將XMLHttpRequest的withCredentials屬性設(shè)置為true就可以發(fā)送帶憑據(jù)(cookie、HTTP認證、客戶端SSL證明等)的跨域請求.

var xhr=new XMLHttpRequest();
xhr.withCredentials=true;

如果服務(wù)器接受帶憑據(jù)的請求會用下面的HTTP頭部響應(yīng):

Access-Control-Allow-Credentials:true

JSONP由兩部分組成:回調(diào)函數(shù)+數(shù)據(jù),回調(diào)函數(shù)是當響應(yīng)到來時應(yīng)該在頁面中調(diào)用的函數(shù),回調(diào)函數(shù)的名字一般是在請求中指定的.而數(shù)據(jù)就是傳入回調(diào)函數(shù)中的JSON數(shù)據(jù).JSONP是通過動態(tài)