----------------------------------------------------------------------------------------------------------

http://www.ruanyifeng.com/blog/2016/04/cors.html

整個CORS通信過程，都是瀏覽器自動完成，不需要用戶參與。對於開發者來說，CORS通信與同源的AJAX通信沒有差別，代碼完全一樣。

瀏覽器一旦發現AJAX請求跨源，就會自動添加一些附加的頭信息，有時還會多出一次附加的請求，但用戶不會有感覺。

因此，實現CORS通信的關鍵是服務器。只要服務器實現了CORS接口，就可以跨源通信。

二、兩種請求

瀏覽器將CORS請求分成兩類：簡單請求（simple request）和非簡單請求（not-so-simple request）。

只要同時滿足以下兩大條件，就屬於簡單請求。

（1) 請求方法是以下三種方法之一：

• HEAD
• GET
• POST

（2）HTTP的頭信息不超出以下幾種字段：

• Accept
• Accept-Language
• Content-Language
• Last-Event-ID
• Content-Type：只限於三個值application/x-www-form-urlencoded、multipart/form-data、text/plain

凡是不同時滿足上面兩個條件，就屬於非簡單請求。

瀏覽器對這兩種請求的處理，是不一樣的。

三、簡單請求

3.1 基本流程

對於簡單請求，瀏覽器直接發出CORS請求。具體來說，就是在頭信息之中，增加一個Origin字段。

下面是一個例子，瀏覽器發現這次跨源AJAX請求是簡單請求，就自動在頭信息之中，添加一個Origin字段。

GET /cors HTTP/1.1
Origin: http://api.bob.com
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

上面的頭信息中，Origin字段用來說明，本次請求來自哪個源（協議 + 域名 + 端口）。服務器根據這個值，決定是否同意這次請求。

如果Origin指定的源，不在許可範圍內，服務器會返回一個正常的HTTP回應。瀏覽器發現，這個回應的頭信息沒有包含Access-Control-Allow-Origin字段（詳見下文），就知道出錯了，從而拋出一個錯誤，被XMLHttpRequest的onerror回調函數捕獲。註意，這種錯誤無法通過狀態碼識別，因為HTTP回應的狀態碼有可能是200。

如果Origin指定的域名在許可範圍內，服務器返回的響應，會多出幾個頭信息字段。

Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8

上面的頭信息之中，有三個與CORS請求相關的字段，都以Access-Control-開頭。

（1）Access-Control-Allow-Origin

該字段是必須的。它的值要麽是請求時Origin字段的值，要麽是一個*，表示接受任意域名的請求。

（2）Access-Control-Allow-Credentials

該字段可選。它的值是一個布爾值，表示是否允許發送Cookie。默認情況下，Cookie不包括在CORS請求之中。設為true，即表示服務器明確許可，Cookie可以包含在請求中，一起發給服務器。這個值也只能設為true，如果服務器不要瀏覽器發送Cookie，刪除該字段即可。

（3）Access-Control-Expose-Headers

該字段可選。CORS請求時，XMLHttpRequest對象的getResponseHeader()方法只能拿到6個基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必須在Access-Control-Expose-Headers裏面指定。上面的例子指定，getResponseHeader(‘FooBar‘)可以返回FooBar字段的值。

3.2 withCredentials 屬性

上面說到，CORS請求默認不發送Cookie和HTTP認證信息。如果要把Cookie發到服務器，一方面要服務器同意，指定Access-Control-Allow-Credentials字段。

Access-Control-Allow-Credentials: true

另一方面，開發者必須在AJAX請求中打開withCredentials屬性。

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

否則，即使服務器同意發送Cookie，瀏覽器也不會發送。或者，服務器要求設置Cookie，瀏覽器也不會處理。

但是，如果省略withCredentials設置，有的瀏覽器還是會一起發送Cookie。這時，可以顯式關閉withCredentials。

xhr.withCredentials = false;

需要註意的是，如果要發送Cookie，Access-Control-Allow-Origin就不能設為星號，必須指定明確的、與請求網頁一致的域名。同時，Cookie依然遵循同源政策，只有用服務器域名設置的Cookie才會上傳，其他域名的Cookie並不會上傳，且（跨源）原網頁代碼中的document.cookie也無法讀取服務器域名下的Cookie。

JS設置document.domain實現跨域

document.domain

用來得到當前網頁的域名。
比如在地址欄裏輸入：

代碼如下:
javascript:alert(document.domain); //www.jb51.net

我們也可以給document.domain屬性賦值，不過是有限制的，你只能賦成當前的域名或者基礎域名。
比如：

代碼如下:
javascript:alert(document.domain = "jb51.net"); //jb51.net
javascript:alert(document.domain = "www.jb51.net"); //www.jb51.net

上面的賦值都是成功的，因為www.jb51.net是當前的域名，而jb51.net是基礎域名。
但是下面的賦值就會出來"參數無效"的錯誤：

代碼如下:
javascript:alert(document.domain = "cctv.net"); //參數無效
javascript:alert(document.domain = "www.jb51.net"); //參數無效

因為cctv.net與www.jb51.net不是當前的域名也不是當前域名的基礎域名，所以會有錯誤出現。這是為了防止有人惡意修改document.domain來實現跨域偷取數據。

利用document.domain 實現跨域：
前提條件：這兩個域名必須屬於同一個基礎域名!而且所用的協議，端口都要一致，否則無法利用document.domain進行跨域.
Javascript出於對安全性的考慮，而禁止兩個或者多個不同域的頁面進行互相操作。
相同域的頁面在相互操作的時候不會有任何問題。

比如在：aaa.com的一個網頁(a.html)裏面 利用iframe引入了一個bbb.com裏的一個網頁(b.html)。
這時在a.html裏面可以看到b.html裏的內容，但是卻不能利用javascript來操作它。因為這兩個頁面屬於不同的域，在操作之前，js會檢測兩個頁面的域是否相等，如果相等，就允許其操作，如果不相等，就會拒絕操作。
這裏不可能把a.html與b.html利用JS改成同一個域的。因為它們的基礎域名不相等。(強制用JS將它們改成相等的域的話會報跟上面一樣的"參數無效錯誤。")

所以如果在a.html裏引入aaa.com裏的另一個網頁，是不會有這個問題的，因為域相等。
有另一種情況，兩個子域名：
aaa.xxx.com
bbb.xxx.com
aaa裏的一個網頁(a.html)引入了bbb 裏的一個網頁(b.html)，
這時a.html裏同樣是不能操作b.html裏面的內容的。
因為document.domain不一樣，一個是aaa.xxx.com，另一個是bbb.xxx.com。
這時我們就可以通過Javascript，將兩個頁面的domain改成一樣的，
需要在a.html裏與b.html裏都加入：

代碼如下:
document.domain = "xxx.com";

這樣這兩個頁面就可以互相操作了。也就是實現了同一基礎域名之間的"跨域"

跨域資源請求（除jsonp以外）的方法