CORS（跨源資源共享）實戰

聲明：本文中的cors爲createCORSRequest返回的對象

一、 同一跨域接口

function createCORSRequest(method, url) {

       var xhr = new XMLHttpRequest();

       // 支持cors，檢查xhr的withCredentials屬性

       if("withCredentials" in xhr) {

              xhr.open(method, url, true);

       }

       // IE8

       else if(typeof XDomainRequest != "undefined") {

              xhr = new XDomainRequest();

              xhr.open(method, url);

       } else {

              xhr = null;

       }

       return xhr;

}

二、格式化post 傳遞的數據

function postDataFormat(obj){

       if(typeof obj != "object" ) {

              alert("輸入的參數必須是對象");

              return;

       }

 

       // 支持有FormData的瀏覽器（Firefox 4+ , Safari 5+, Chrome和Android 3+版的Webkit）

       if(typeof FormData == "function") {

              var data = new FormData();

              for(var attr in obj) {

                     data.append(attr,obj[attr]);

              }

              return data;

       }else {

              // 不支持FormData的瀏覽器的處理

              var arr = new Array();

              var i = 0;

              for(var attr in obj) {

                     arr[i] = encodeURIComponent(attr) + "=" + encodeURIComponent(obj[attr]);

                     i++;

              }

              return arr.join("&");

       }

}

三、格式化get請求查詢參數

function getDataFormat(obj) {

       if(typeof obj != "object" ) {

              alert("輸入的參數必須是對象");

              return;

       }

       var arr = new Array();

       var i = 0;

       for(var attr in obj) {

              arr[i] = encodeURIComponent(attr) + "=" + encodeURIComponent(obj[attr]);

              i++;

       }

       return "?" + arr.join("&");

}

四、cors.abort() 該方法用於中止正在進行的請求

五、error: 用於檢測錯誤

cors.onerror = function() {

　　// 處理錯誤的代碼

};

六、load: 用於檢測成功

cors.onload = function() {

　　// 處理成功的代碼

};

七、send(null | postData) 用於發送數據 ,請求方式爲get時爲null, 請求方式爲post時爲postData

八、get跨域請求實例

var data = {name:"ccb"};

var xhr = createCORSRequest("get", http://www.question.com/php/test.php+ getDataFormat(data));

xhr.onload = function() {

       alert(xhr.responseText);

};

xhr.onerror = function() {

       alert("跨域請求出錯");

};

xhr.send(null);

九、post跨域請求實例

var data = {name:"ccb"};

var xhr = createCORSRequest("post", "http://www.question.com/php/test.php");

xhr.onload = function() {

       alert(xhr.responseText);

};

xhr.onerror = function() {

       alert("跨域請求出錯");

};

xhr.send(postDataFormat(data));

十、 跨域請求中的服務器端的設置

方法一：Apache配置文件配置

在Apache配置文件（Apache\conf\extra\httpd-vhosts.conf）的<Directory>, <Location>, <Files>或<VirtualHost>的配置里加入如下內容便可：

Header set Access-Control-Allow-Origin * 

或

Header set Access-Control-Allow-Origin http://www.test.com（具體站點）推薦

方法二：PHP文件中設置    

   PHP：只須要使用以下的代碼設置便可。

        header("Access-Control-Allow-Origin:*"); 

或

header("Access-Control-Allow-Origin: http://www.test.com ") 推薦具體域名後面不能夠加「/」

以上的配置的含義是容許任何域發起的請求均可以獲取當前服務器的數據。固然，這樣有很大的危險性，惡意站點可能經過XSS攻擊咱們的服務器。因此咱們應該儘可能有針對性的對限制安全的來源。使用推薦方式。