CORS解決同源問題

同源問題有幾種解決方式 , 例如JSONP ,CORS ,服務器轉發等
  • JSONP需要服務端和客戶端對請求做很多操作,封裝 ; 不適合開發
  • 服務器轉發, 工作量大 , 不適合開發
  • CORS 服務器端簡單配置 , 適合開發
CORS介紹
  • CORS 是一個 W3C 標準,全稱是"跨域資源共享"(Cross-origin resource sharing)。它允許瀏覽器向跨源服務器,發出 XMLHttpRequest 請求,從而克服了 AJAX 只能同源使用的限制
  • CORS 需要瀏覽器和服務器同時支持。目前,所有瀏覽器都支持該功能,IE 瀏覽器不能低於 IE10。
  • 整個 CORS 通信過程,都是瀏覽器自動完成,不需要用戶參與。對於開發者來說,CORS 通信與同源的 AJAX 通信沒有差別,代碼完全一樣。瀏覽器一旦發現 AJAX 請求跨源,就會自動添加一些附加的頭信息,有時還會多出一次附加的請求,但用戶不會有感覺
  • 因此,實現 CORS 通信的關鍵是服務器。只要服務器實現了 CORS 接口,就可以跨源通信
使用 CORS 設置服務端允許跨域
  1. Access-Control-Allow-Origin
    該字段是必須的。它的值要麼是請求時 Origin 字段的值,要麼是一個*,表示接受任意域名的請求。
    res.writeHead(200, { "Content-Type": "application/json" ,"Access-Control-Allow-Origin":"*"});
    
    指定允許跨源訪問的資源
    res.writeHead(200, { "Content-Type": "application/json" ,"Access-Control-Allow-Origin":"http://172.0.0.1"});
    
  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 字段的值。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章