js-跨域源資源共享(CORS)


### 一. CORS(Cross-Origin Resource Sharing,跨域源資源共享)

  基本思想:使用自定義HTTP頭部讓瀏覽器與服務器進行溝通

    發送請求時,需附加一個Origin頭部

      eg:   Origin:   http://www.xxx.net

  如果服務認為這個請求可以接受,就在Access-Control-Allow-Origin投不中回發相同的源信息

    Access-Control-Allow-Origin: http://www.xxx.net

  1)  IE對CORS的實現

    XDR(XDomainRequest),這個對象與XHR類似

      1.1) 與XHR區別:

        cookie不會隨請求發送,也不會隨響應返回

        只能設置請求頭部信息中的Content-Type字段

        不能訪問響應頭部信息

        只支持GET和POST請求

    該對象的創建與發送請求的方法與XHR相似,但open()方法只含兩個參數(請求類型,URL

    **所有的XDR請求都是異步執行的**

    eg:  var xdr = new XDomainRequest();

       xdr.onload =  function(){

         alert(xdr.responseText);

       }

       xdr.open("get",http://www.xxx.com/page/*);

       xdr.send(null)

    在接收到響應后,你只能訪問響應的原始文本;沒有辦法確定響應的狀態代碼,只要成功就會觸發load事件,如果失敗觸發error事件

    XDR提供了contentType屬性,用來表示發送數據的格式,定義在open及send方法之間

 

  2.)其他瀏覽器對CORS的實現

    其他瀏覽器通過XMLHttpRequest對象實現對CORS的原生支持

    請求位於另外一個域中的資源,使用標准 的XHR對象並在open中的URL中傳入絕對URL即可

      eg:    xhr.open("GET","http://www.somewhere.com/page/",true)

  3.) 帶憑據的請求

    默認情況下,跨源請求不提供憑據(cookie、HTTP認證及客戶端SSL證明等)。通過將withCredentials屬性設置為true,可以指定某個請求應該發送憑據

      

      XMLHttpRequest.withCredentials  屬性是一個Boolean類型,它指示了是否該使用類似cookies,authorization headers(頭部授權)或者TLS客戶端證書這一類資格證書來創建一個跨站點訪問控制(cross-site Access-Control)請求。在同一個站點下使用withCredentials屬性是無效的。

      此外,這個指示也會被用做響應中cookies 被忽視的標示。默認值是false。

      如果在發送來自其他域的XMLHttpRequest請求之前,未設置withCredentials 為true,那么就不能為它自己的域設置cookie值。而通過設置withCredentials 為true獲得的第三方cookies,將會依舊享受同源策略,因此不能被通過document.cookie或者從頭部相應請求的腳本等訪問

  4.) 跨瀏覽器的CORS

    檢測XHR是否支持CORS的最簡單方法,就是檢查是否存在withCredentials屬性。再結合檢測XDomainRequest對象是否存在

    eg: 

      function createCORSRequest(method,url){

        var xhr = new XMLHttpRequest();

        if("withCredentials" in xhr){    

          xhr.open(method,url,true)

        }else if(typeof XDomainRequest != "undefined"){    // IE

          xhr = new XDomainRequest

        }else{

          xhr = null

        }

        return xhr;         

      }

    var request = createCORSRequset("get","http://somewhere-else.com/page/")

    if(request){

      request.onload = function(){

        alert(request.responseText)

      }

      request.send()

    }

    


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM