使用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 = url;
        //将他追加到文档
        document.appendChild(scriptDom);
    }

服务器端

 根据学号查询学生信息的支持跨域接口 http://www.studentl.com/?studentid=""&callback=""

  服务端最终 查询数据 响应客户端 这样的内容requset.queryString["callback"]+"({json数据})“