首页 > 代码库 > 使用XHR2或Jsonp实现跨域以及实现原理

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

 

我们直接使用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 =http://www.mamicode.com/ url;        //将他追加到文档        document.appendChild(scriptDom);    }

服务器端

 根据学号查询学生信息的支持跨域接口 http://www.studentl.com/?studentid=""&callback=""
  服务端最终 查询数据 响应客户端 这样的内容requset.queryString["callback"]+"({json数据})“
技术分享

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