启用CORS实现Ajax跨域请求

启用CORS实现Ajax跨域请求

某年某月的一天,需要实现这样一个需求,在当前站点中用ajax发送一个请求到另一个站点获取数据,b.com   —>    s.com,刚开始以为没什么,不就一条请求嘛,立马就写了出来,结果出现一个错误200的请求,还有一个提示信息;
20141020162144

这是什么情况,于是找度娘问了起来,大概的结果如下(部分文字直接拿过来的):

跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的内容)

CORS的原理:

CORS定义一种跨域访问的机制,可以让AJAX实现跨域访问。CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单,只需由服务器发送一个响应标头即可。

假设我们页面或者应用已在 http://www.b.com 上了,而我们打算从 http://www.s.com 请求提取数据。一般情况下,如果我们直接使用 AJAX 来请求将会失败,浏览器也会返回“源不匹配”的错误,”跨域“也就以此由来。

利用 CORS,http://www.s.com 只需添加一个标头,就可以允许来自 http://www.b.com 的请求,下图是我在PHP中的 hander() 设置,“*”号表示允许任何域向我们的服务端提交请求

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

也可以设置指定的域名,如域名 http://www.s.com ,那么就允许来自这个域名的请求

header(“Access-Control-Allow-Origin:http://www.s.com“);

当前我设置的header为“*”,任意一个请求过来之后服务端我们都可以进行处理&响应,那么在调试工具中可以看到其头信息设置,其中见红框中有一项信息是“Access-Control-Allow-Origin:* ”,表示我们已经启用CORS,如下图。

20141020163600

//兼容IE8的javascript
//浏览器是否通过XHR支持CORS,合并<strong>XDomainRequest </strong>对象的存在性来支持所有的浏览器
function createCORSRequest(method, url){
    var xhr = new XMLHttpRequest();
    if ("withCredentials" in xhr){
        xhr.open(method, url, true);
    } else if (typeof XDomainRequest != "undefined"){
        xhr = new XDomainRequest();
        xhr.open(method, url);
    } else {
        xhr = null;
    }
    return xhr;
}
var request= createCORSRequest("get", "http://www.xxx.com");
if (request){
    datas.onload = function(){
        //do something with request.responseText,responseText服务器中返回的数据
    };
    request.send();
}
分享到:
标签:ajax,CORS,跨域,
^_^ 亲爱的客官,如果您觉得本文对您有好处,请移动你的鼠标点点下面的广告或上面的或右上角的,非常感谢~ ^_^