网站系统建设系广告经营者,天津武清做网站,开发公司有大证是否可以直接买房,织梦建站教程全集什么是跨域
跨域是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com 页面去请求 www.google.com 的资源。跨域的严格一点的定义是#xff1a;只要 协议#xff0c;域名#xff0c;端口有任何一个的不同#xff0c;就被当作是跨域
为什么浏览器要限制跨域访…什么是跨域
跨域是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com 页面去请求 www.google.com 的资源。跨域的严格一点的定义是只要 协议域名端口有任何一个的不同就被当作是跨域
为什么浏览器要限制跨域访问呢
原因就是安全问题如果一个网页可以随意地访问另外一个网站的资源那么就有可能在客户完全不知情的情况下出现安全问题。比如下面的操作就有安全问题
用户访问www.mybank.com 登陆并进行网银操作这时cookie啥的都生成并存放在浏览器用户突然想起件事并迷迷糊糊地访问了一个邪恶的网站 www.xiee.com这时该网站就可以在它的页面中拿到银行的cookie比如用户名登陆token等然后发起对www.mybank.com 的操作。如果这时浏览器不予限制并且银行也没有做响应的安全处理的话那么用户的信息有可能就这么泄露了。
为什么要跨域
既然有安全问题那为什么又要跨域呢 有时公司内部有多个不同的子域比如一个是location.company.com ,而应用是放在app.company.com , 这时想从 app.company.com去访问 location.company.com 的资源就属于跨域。
跨域访问需要的两件宝贝
由于浏览器一般不对scriptimg等进行跨域限制所以我们有机会通过script的方式来实现跨域访问。
跨域访问需要用到两样东东一个是JSON一种基于文本的传输协议一种是JSONP一群码农想出来的跨域解决方案。关于JSON与JSONP的解释可以参考 JSON JSONP
实现跨域访问 服务端需要做什么
服务端要检查访问的请求参数如果没有callback则可以按照之前的流程走如果带着callback参数则需要将返回的结果包装在callback里面。
比如请求的URL是: app.company.com/location?callbackmyCallback , 那么服务端则需要把结果封装进myCallback 函数里面 如下
if (params.query params.query.callback) {//console.log(params.query.callback);var str params.query.callback ( JSON.stringify(data) );//jsonpres.end(str);} else {res.end(JSON.stringify(data));//普通的json}
实现跨域访问 客户端需要做什么
客户端有多种方式可以实现JSONP的调用
jQuery jQuery可以在Ajax里面设置datatype为jsonp则可以进行跨域访问$scope.jqueryJsonpRequest function(){jQuery.ajax({type: get,async: false,url: https://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts,dataType: jsonp,jsonp: callback,//传递给请求处理程序或页面的用以获得jsonp回调函数名的参数名(一般默认为:callback)jsonpCallback:flightHandler,//自定义的jsonp回调函数名称默认为jQuery自动生成的随机函数名也可以写?jQuery会自动为你处理数据success: function(json){alert(success JSON.stringify(json));},error: function(){alert(fail);}});};
AngularJS AngularJS的$http 也提供了对jsonp的访问直接调用jsonp进行跨域访问
$http.jsonp(https://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts?callbackJSON_CALLBACK).success(function(data){alert(success:data);}).error(function(err){alert(error:err);}); 手动实现 不管是jQuery也好AngularJS也罢底下都不是发起XHR XML HTTP Request而都是通过加载javascript的方式来做的所以如果项目没有依赖jQuery或者AngularJS则可以自己手动实现jsonp的调用。 原理很简单就是用javascript动态加载一个script文件同时定义一个callback函数给script执行而已。 //定义callback 函数
var myCallbackFunction function(data){// 对返回的数据做后续处理alert(uuu:JSON.stringify(data));}
//把callback函数赋给window对象供script回调
window.myCallbackFunction myCallbackFunction;
//创建并加载script
var script document.createElement(script);
script.src https://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts?callbackmyCallbackFunction;
document.body.appendChild(script);
