使用XHR2或Jsonp实现跨域以及实现原理

时间：2017-01-07 11:46:42 阅读：216 评论：0 收藏：0 [点我收藏+]

标签：move 随机票据 indexof users 域名学生 with 分享

我们直接使用XMLHttpRequset请求外部接口会发现

报这个错误技术分享

其实浏览器成功发送请求并拿回了数据只是浏览器的同源策略禁止了获取在xhr2 服务器端支持跨域需要在响应头增加

Access-Control-Allow-Origin: * //*代表任何域。也可以指定地址

Access-Control-Allow-Methods: POST,GET //支持的方法

同源策略

技术分享

同源策略主要针对XMLHttpRequset 保证请求url 必须跟当前站点的协议域名端口一致

XHR2 CORS（跨域资源共享）实现跨域请求

XHRWidtCredentils 跨域请求是否包含cookie 票据等凭证(不常使用见)

可以通过这个属性判断是否支持跨域：

if(new XHRHttpRequset().XHRWidtCredentils==undefied)return false;

服务器端响应接口需要加上这2个响应头头

Access-Control-Allow-Origin: * //*代表任何域。也可以指定地址

Access-Control-Allow-Methods: POST,GET //支持的方法

    window.onload = function () {
        var xhr = new XMLHttpRequest();
        if (xhr.withCredentials === undefined) return false;

        xhr.open("get", "http://www.baidu.com");
        xhr.onreadystatechange = function () {
            if (xhr.readyState !== 4) return;//忽略未完成的调用
            if (xhr.status === 200) {
                console.log(xhr.responseText);
            }
        }
        xhr.send(null);
    }

JsonP实现跨域请求

服务器端支持：返回数据格式必须是calback({json数据}) callback必须是请求客户端存在的回调函数

浏览器端：

通过创建script标签请求外部资源没有同源策略限制

支持跨域请求的服务端响应数据为callback({json数据}) 当作为js解析则正好调用了我们的回调函数

例子：

客户端

    function GetJsonp(url, callback) {

        var responseCallback = callback.name + GetJsonp.index++;//为每次调用生成一个唯一的回调名字
        var scriptDom = document.createElement("script");//创建一个script标签
        //生成一个随机的 服务器端回调函数
        GetJsonp[responseCallback] = function (data) {
            try {
                //最终回调我们自己的处理函数
                callback(data);
            } finally {
                //每次请求完成后函数
                document.removeChild(scriptDom);//删除标签
                delete GetJsonp[responseCallback];//删除生成的函数
            }
        }
      

        if (url.indexof("?") === -1) {
            //如果url没有包含参数 则添加服务器端生成回调的函数
            url += "?callback=" + "GetJsonp[" + responseCallback + "]";
        } else {
            //仅仅是追加参数
            url += "&callback=" + "GetJsonp[" + responseCallback + "]";
        }
        //设置script标签的请求地址
        scriptDom.src = url;
        //将他追加到文档
        document.appendChild(scriptDom);
    }