跨域詳解（HTTP CORS）

跨域詳解（HTTP CORS）

由於同源策略的限制，想跨域須要一些特殊方法，目前跨域有多種方式CORS、jsonp、iframe等，本文主要講解http cors。

CORS名詞解釋

簡單請求

簡單請求（Simple requests）知足如下條件就是簡單請求，就不會觸發預檢請求。

預檢請求

預檢請求（Preflighted requests）會先發起methed爲OPTIONS請求以獲取是否容許該實際請求，若是容許再發送實際請求。

客戶端

跨域請求

簡單請求和預檢請求通常按照正常的ajax或者fetch請求發送，但若是想攜帶cookie驗證身份信息，須要設置withCredentials，並且服務器響應Access-Control-Allow-Origin須要指定當前頁面host。

var invocation = new XMLHttpRequest();
var url = 'http://bar.other/resources/credentialed-content/';
    
function callOtherDomain(){
  if(invocation) {
    invocation.open('GET', url, true);
    invocation.withCredentials = true;
    invocation.onreadystatechange = handler;
    invocation.send(); 
  }
}
複製代碼

cookie有Domain做用域的，不一樣主域是沒法獲取cookie的，因此攜帶的cookie只會是請求目標服務器同域的，Cookie的做用域。

服務端

簡單請求響應

能夠設置如下參數

Access-Control-Allow-Origin: http://test.com // 容許域名
Access-Control-Allow-Methods: POST, GET, OPTIONS // 容許方法
Access-Control-Allow-Credentials: true // 容許瀏覽器讀取response
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type // 自定義頭部字段
Access-Control-Max-Age: 86400 // 有效時間
複製代碼

若是隻是預檢請求設置Access-Control-Allow-Origin，在實際請求後將跨域頁面仍是沒法獲取響應數據。

預檢請求響應

一、 預檢請求

主要設置如下參數：

Access-Control-Allow-Origin: http://test.com // 容許域名
Access-Control-Allow-Methods: POST, GET, OPTIONS // 容許方法
Access-Control-Allow-Credentials: true // 容許瀏覽器讀取response
複製代碼

只有當知足響應的條件，瀏覽器客戶端纔會發起實際請求。

二、 實際請求

同簡單請求