首页 > 代码库 > 使用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实现跨域以及实现原理
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。