我们直接使用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数据})“