文档章节

跨域与跨域访问

monroeCode
 monroeCode
发布于 2017/03/27 11:53
字数 952
阅读 17
收藏 0

什么是跨域

跨域是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com 页面去请求 www.google.com 的资源。跨域的严格一点的定义是:只要 协议,域名,端口有任何一个的不同,就被当作是跨域

为什么浏览器要限制跨域访问呢?

原因就是安全问题:如果一个网页可以随意地访问另外一个网站的资源,那么就有可能在客户完全不知情的情况下出现安全问题。比如下面的操作就有安全问题:

  1. 用户访问www.mybank.com ,登陆并进行网银操作,这时cookie啥的都生成并存放在浏览器
  2. 用户突然想起件事,并迷迷糊糊地访问了一个邪恶的网站 www.xiee.com
  3. 这时该网站就可以在它的页面中,拿到银行的cookie,比如用户名,登陆token等,然后发起对www.mybank.com 的操作。
  4. 如果这时浏览器不予限制,并且银行也没有做响应的安全处理的话,那么用户的信息有可能就这么泄露了。

为什么要跨域

既然有安全问题,那为什么又要跨域呢? 有时公司内部有多个不同的子域,比如一个是location.company.com ,而应用是放在app.company.com , 这时想从 app.company.com去访问 location.company.com 的资源就属于跨域。

跨域访问需要的两件宝贝

由于浏览器一般不对script,img等进行跨域限制,所以我们有机会通过script的方式来实现跨域访问。

跨域访问需要用到两样东东,一个是JSON,一种基于文本的传输协议;一种是JSONP,一群码农想出来的跨域解决方案。关于JSON与JSONP的解释,可以参考 JSON & JSONP

实现跨域访问 服务端需要做什么

服务端要检查访问的请求参数,如果没有callback,则可以按照之前的流程走;如果带着callback参数,则需要将返回的结果包装在callback里面。

比如请求的URL是: app.company.com/location?callback=myCallback , 那么服务端则需要把结果封装进myCallback 函数里面, 如下

if (params.query && params.query.callback) { //console.log(params.query.callback); var str = params.query.callback + '(' + JSON.stringify(data) + ')';//jsonp res.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?callback=JSON_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?callback=myCallbackFunction'; document.body.appendChild(script);

© 著作权归作者所有

共有 人打赏支持
monroeCode

monroeCode

粉丝 88
博文 135
码字总数 225844
作品 0
深圳
运营/编辑
私信 提问
关于跨域问题

跨域首先要知道域是什么?域(Domain)是Windows网络中独立运行的单位,域和域之间相互访问,则需要建立信任关系。信任关系是连接在域和域之间的桥梁。当一个域和其他域建立信任关系之后,两...

lihao0609
2017/12/13
0
0
SpringBoot 实现前后端分离的跨域访问(CORS)

一、基本介绍 CORS是一种访问机制,英文全称是Cross-Origin Resource Sharing,即我们常说的跨域资源共享,通过在服务器端设置响应头,把发起跨域的原始域名添加到Access-Control-Allow-Orig...

Jokey2017
2017/11/14
0
0
关于跨域的小总结

跨域限制不仅仅是浏览器的行为,也可能是服务端的行为。 如果服务端不限制跨域访问,那就只有浏览器进行了跨域限制,浏览器遵循同源策略。 如果服务端做了跨域限制,那么即使请求成功发出,服...

huanxin2008
2017/12/24
0
0
JQuery + JsonP 解决跨域请求

什么是跨域 跨域是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com 页面去请求 www.google.com 的资源。跨域的严格一点的定义是:只要 协议,域名,端口有任何一个的不同,就...

刘引惟
2016/11/23
75
0
跨域解决方案(二)

CORS 原理:Cross-Origin Resource Sharing ,即跨源资源共享,在现代版浏览器上,增加一些新的请求头和响应头,浏览器通过这些请求头和响应头,判断是否允许我们跨域访问,以及允许的访问的时...

兴趣e族
2016/12/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

容器服务

简介 容器服务提供高性能可伸缩的容器应用管理服务,支持用 Docker 和 Kubernetes 进行容器化应用的生命周期管理,提供多种应用发布方式和持续交付能力并支持微服务架构。 产品架构 容器服务...

狼王黄师傅
昨天
3
0
高性能应用缓存设计方案

为什么 不管是刻意或者偶尔看其他大神或者大师在讨论高性能架构时,自己都是认真的去看缓存是怎么用呢?认认真真的看完发现缓存这一块他们说的都是一个WebApp或者服务的缓存结构或者缓存实现...

呼呼南风
昨天
12
0
寻找一种易于理解的一致性算法(扩展版)

摘要 Raft 是一种为了管理复制日志的一致性算法。它提供了和 Paxos 算法相同的功能和性能,但是它的算法结构和 Paxos 不同,使得 Raft 算法更加容易理解并且更容易构建实际的系统。为了提升可...

Tiny熊
昨天
3
0
聊聊GarbageCollectionNotificationInfo

序 本文主要研究一下GarbageCollectionNotificationInfo CompositeData java.management/javax/management/openmbean/CompositeData.java public interface CompositeData { public Co......

go4it
昨天
3
0
阿里云ECS的1M带宽理解

本文就给大家科普下阿里云ECS的固定1M带宽的含义。 “下行带宽”和“上行带宽” 为了更好的理解,需要先给大家解释个词“下行带宽”和“上行带宽”: 下行带宽:粗略的解释就是下载数据的最大...

echojson
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部