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攻击咱们的服务器。因此咱们应该尽可能有针对性的对限制安全的来源。使用推荐方式。