CORS協議總結

• 簡單請求
• 預請求
• 附帶憑證信息的請求
• Access-Control-Max-Age
• Access-Control-Allow-Origin
• Access-Control-Allow-Credentials
• Access-Control-Allow-Methods
• Access-Control-Allow-Headers
• Access-Control-Expose-Headers
• 總結

簡單請求

• 只使用 GET, HEAD 或者 POST 請求方法。如果使用 POST 向服務器端傳送數據，則數據類型(Content-Type)只能是 application/x-www-form-urlencoded, multipart/form-data 或 text/plain中的一種
• 不會使用自定義請求頭（類似于 X-Modified 這種）

預請求

不同于上面討論的簡單請求，<u>“預請求”要求必須先發送一個 OPTIONS 請求給目的站點，來查明這個跨站請求對于目的站點是不是安全可接受的。</u>這樣做，是因為跨站請求可能會對目的站點的數據造成破壞。 當請求具備以下條件，就會被當成預請求處理：

• 請求以 GET, HEAD 或者 POST 以外的方法發起請求?；蛘?，使用 POST，但請求數據為 application/x-www-form-urlencoded, multipart/form-data 或者 text/plain 以外的數據類型。比如說，用 POST 發送數據類型為 application/xml 或者 text/xml 的 XML 數據的請求。
• 使用自定義請求頭（比如添加諸如 X-PINGOTHER）

Note: 從Gecko 2.0開始，text/plain, application/x-www-form-urlencoded 和 multipart/form-data 類型的數據都可以直接用于跨站請求，而不需要先發起“預請求”了。之前，只有 text/plain 可以不用先發起“預請求”，進行跨站請求。

附帶憑證信息的請求

XMLHttpRequest和訪問控制功能，最有趣的特性就是，發送憑證請求（HTTP Cookies和驗證信息）的功能。一般而言，對于跨站請求，瀏覽器是不會發送憑證信息的。但如果將XMLHttpRequest的一個特殊標志位設置為true，瀏覽器就將允許該請求的發送。

1.    var invocation = new XMLHttpRequest();
2.    var url = 'http://bar.other/resources/credentialed-content/';
3.    function callOtherDomain(){
4.      if(invocation) {
5.        invocation.open('GET', url, true);
6.        invocation.withCredentials = true; //ajax請求必須要設置這個
7.        invocation.onreadystatechange = handler;
8.        invocation.send();
9.      }
10.   }

如上示例，第六行代碼將XMLHttpRequest的withCredentials標志設置為true，從而使得Cookies可以隨著請求發送。因為這是一個簡單的GET請求，所以瀏覽器不會發送一個“預請求”。但是，如果服務器端的響應中，如果沒有返回Access-Control-Allow-Credentials: true的響應頭，那么瀏覽器將不會把響應結果傳遞給發出請求的腳本程序，以保證信息的安全。

Access-Control-Max-Age

Access-Control-Max-Age: <delta-seconds>

這個頭告訴我們這次預請求的結果的有效期是多久,delta-seconds 參數表示,允許這個預請求的參數緩存的秒數,在此期間,不用發出另一條預檢請求.

Access-Control-Allow-Origin

Access-Control-Allow-Origin: <origin> | *

origin參數指定一個允許向該服務器提交請求的URI.<u>對于一個不帶有credentials的請求,可以指定為'*'</u>,表示允許來自所有域的請求.<u>對于帶有credentials的請求，不能指定為*，必須為一個確定的域.</u>

例：nginx配置

proxy_hide_header 'Access-Control-Allow-Origin';
add_header 'Access-Control-Allow-Origin' 'http://192.168.75.124:8000';

Access-Control-Allow-Credentials

Access-Control-Allow-Credentials: true | false

告知客戶端,當請求的credientials屬性是true的時候,響應是否可以被得到.當它作為預請求的響應的一部分時,它用來告知實際的請求是否使用了credentials.注意,簡單的GET請求不會預檢,所以如果一個請求是為了得到一個帶有credentials的資源,而響應里又沒有Access-Control-Allow-Credentials頭信息,那么說明這個響應被忽略了.

Access-Control-Allow-Methods

Access-Control-Allow-Methods: <method>[, <method>]*

指明資源可以被請求的方式有哪些(一個或者多個). 這個響應頭信息在客戶端發出預檢請求的時候會被返回.
例：nginx配置

proxy_hide_header 'Access-Control-Allow-Methods';
add_header 'Access-Control-Allow-Methods' 'GET,POST,DELETE,OPTIONS';

Access-Control-Allow-Headers

Access-Control-Allow-Headers: X-PINGOTHER

在響應預檢請求的時候使用.用來指明在實際的請求中,可以使用哪些自定義HTTP請求頭.<u>即指定服務器可以接受那些客戶端自定義header，也即客戶端可以向服務器發送那些自定義header.</u>
例：nginx配置

proxy_hide_header 'Access-Control-Allow-Headers';
add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept, Cookie, Set-Cookie';

Access-Control-Expose-Headers

Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header

設置瀏覽器允許訪問的服務器的頭信息的白名單.這樣, X-My-Custom-Header 和 X-Another-Custom-Header這兩個頭信息,都可以被瀏覽器得到.<u>即值指定瀏覽器可以讀取那些服務器返回的header.</u>

總結

1.簡單的跨域訪問

add_header 'Access-Control-Allow-Origin' '*'

2.如果需要傳遞cookie，即附帶憑證信息的請求
客戶端處理

$httpProvider.defaults.withCredentials = true

服務器端處理

add_header 'Access-Control-Allow-Origin' 'http://192.168.75.107:8000'; ## 不能用 *
add_header 'Access-Control-Allow-Credentials' 'true';

3.如果需要服務器接收header

add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept, Cookie, Set-Cookie';

4.如果需要瀏覽器接收header

add_header 'Access-Control-Expose-Headers' 'Header1, Header2';

文章參考自 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS