跨域詳解(HTTPCORS)

NO IMAGE

跨域詳解(HTTP CORS)

因為同源策略的限制,想跨域需要一些特殊方法,目前跨域有多種方式CORSjsonpiframe等,本文主要講解http cors

CORS名詞解釋

簡單請求

簡單請求(Simple requests)滿足以下條件就是簡單請求,就不會觸發預檢請求。

跨域詳解(HTTPCORS)

預檢請求

預檢請求(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,在實際請求後將跨域頁面還是無法獲取響應數據。

預檢請求響應

1、 預檢請求

主要設置以下參數:

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

只有當滿足響應的條件,瀏覽器客戶端才會發起實際請求。

2、 實際請求

簡單請求

相關文章

【12.30~1.4週報】我當導演啦

springboot多環境(dev,test,prod)配置

線性代數精華——講透矩陣的初等變換與矩陣的秩

CID規範