Javascript 跨域访问解决方案


Posted in Javascript onFebruary 14, 2009

这里分两类情况:
一、基于同一父域的子域之间页面的访问;参见如下3个domain域:taobao.com、jipiao.taobao.com、promotion.taobao.com;它们有相同的父域taobao.com。
二、基于不同父域页面之间的访问;参见如下3个domain域:taobao.com、baidu.com、sina.com.cn;它们具有不同的父域。

解决它们之间跨域的方案有:
方案1:服务器Proxy
域A的页面JS需要访问域B下的链接获取数据,该方案在域A的服务器端建立一个Proxy程序(可能是ASP、servlet等任何服务端程序),域A的页面JS直接调用本域下的Proxy程序,proxy程序负责将请求发送给域B下的链接并获取到数据,最后再通过Proxy将数据返回给页面JS使用。
经过的访问流程就是: 域A下JS --> 域A 下Proxy -- > 域B下的链接
例子:
第一步:
域A:  http://Jipiao.taobao.com/test.htm
页面上javascript脚本:

<script type="text/javascript"><!-- 
Var sUrl="http://Jipiao.taobao.com/proxy.do"; //本域下代理地址 
var callback = 
{ 
success: function(res) { alert(res.responseText); }, 
failure: function(res) { alert('failure');}, 
argument:{} 
} 
YAHOO.util.Connect.asyncRequest('GET', sUrl, callback, null); 
// --></script>

第二步:
完成域A服务端的Proxy程序(这里假定是一个servlet),伪码如下:
Public class Proxy extends …….{ 
..doGet(……..){ 
HttpClient client=……; 
GetMethod get=new GetMethod("www.baidu.com/xxxxx.do");//访问域B的链接 
int statusCode = client.executeMethod(get); 
if (statusCode != HttpStatus.SC_OK) { 
byte[] responseBody = get.getResponseBody(); 
String res=new String(responseBody); 
Httpresponse.getWriter().write(res);//将数据返回给域A 
} 
} 
}

方案2:通过Script标签:
在域A页面http://Jipiao.taobao.com/test.htm 的head中写一个空的Script标签:
<html> 
<head> 
<script id="remoteScript" type="text/javascript" src=""/><!-- 
<head> 
<body> 
<script type="text/javascript" > 
Var remoteScript=document.getElementById("remoteScript"); 
remoteScript.src="www.baidu.com/xxxxx.do";//域B的链接 
alert(remote.test);//使用域B返回的JSON数据 
alert(f[0]); 
// --></script> 
</body> 
</html>

注意:这种方案要求域B返回的数据必须是合法的JSON格式或者如JS文件的格式;比如域B返回的数据格式如下:
Var remote={test:'hello'};
Var f=[2,1];

方案3:隐藏iframe、共享domain:
即域A页面http://jipiao.taobao.com/yyyy.htm 的页面上写一个隐藏的iframe:

<html> 
<head> 
<head> 
<body> 
<script type="text/javascript" ><!-- 
Document.domain="taobao.com"; 
Var remoteHtml=document.getElementById("remoteHtml"); 
remoteHtml.src="promotion.taobao.com/xxxx.htm";//这里访问域B的链接 
var document=remoteHtml.ContentDocument; //这里就可以使用document来操作域B中页面xxx.htm的数据了 
// --></script> 
<iframe id="remoteHtml" src="" style="diapay:none" style="diapay:none"/> 
</body> 
</html>

注意:这里http://promotion.taobao.com/xxxx.htm 页面也需要设置document.domain="taobao.com", 这种方法才能奏效。
之所以这种iframe的方法不适合不同父域之间的跨域,是因为设置document.domain只能设置为自己的父域,而不是能设置为其他域,例如:jiapiao.taobao.com只能设置document.domain="taobao.com",而不能是document.domain="baidu.com";
这里列举的三种方案各有优缺点:
Proxy方案优点是可以适用用于几乎所有的跨域访问,而且只需要要一个域中进行开发,另一个域可以提供任何类型格式的数据。缺点是这种方案经过了中间Proxy,所以延迟可能稍微大一点,并且会加重本域服务器的负荷,开发工作量也稍微大一点。
Script标签的方案可以说是非常简单的,不用几行代码就搞定了事,不过它对返回的数据格式要求有点严格,只能是Json格式数据,如果是其他格式的数据,那么这种方法就无能为力了。
隐藏iframe方式也很简单,它可以处理任何返回的数据格式,但它只适用在具有同一个父域下的跨域请求上,并且要求其他域得配合开发,即需要设置document.domain。
原帖详见:http://blog.csdn.net/lovingprince/archive/2008/09/20/2954675.aspx
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
对于JS跨域访问的意思,我想再补充几点:
跨域访问,简单来说就是 A 网站的 javascript 代码试图访问 B 网站,包括提交内容和获取内容;比如想从A网站的页面中执行另外一个B网站内某页面中的JS对象、或者想在A网站的页面中用JS去解析B网站内某页面的dom元素等;出现这种跨域访问问题的应用场景一般是iframe中嵌入不同域的页面、或者向不同域发送Ajax请求等;
由于安全原因,跨域访问是被各大浏览器所默认禁止的;但是浏览器并不禁止在页面中引用其他域的JS文件,并可以自由执行引入的JS文件中的function;这点个人觉得至关重要!
是否跨域的判断规则为对三者进行比较:域名、协议、端口;三者中若有一个不相同,则会出现跨域问题;我们经常说的跨域问题一般指域名不同,因为这种场景出现的几率最高而且有一些办法可以解决;比如前面提到的taobao.com域下的二级域名跨域问题;
对于主域都不一样、或者协议不同(比如https与http)的跨域问题(比如*.taobao.com域想访问*.baidu.com域内的内容),想从Web端来解决是完全不可能的,只能通过服务端Proxy的方案来解决;
常见的不同域间的页面制约dom元素包括:
window.location 可以设置,但不能读取。其它的 location 属性和方法被禁止访问;
document.href 可以设置,但不能读取。其它的 document 属性和方法被禁止访问;
<iframe> 的 src 可以设置,但不能读取;
Javascript 相关文章推荐
fromCharCode和charCodeAt 方法
Dec 27 Javascript
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
Jun 19 Javascript
基于JQuery的6个Tab选项卡插件
Sep 03 Javascript
JSON传递bool类型数据的处理方式介绍
Sep 18 Javascript
删除节点的jquery代码
Jan 13 Javascript
js继承call()和apply()方法总结
Dec 08 Javascript
JavaScript中的值类型详细介绍
Dec 29 Javascript
php+ajax+jquery实现点击加载更多内容
May 03 Javascript
浅谈Angular HttpClient简单入门
May 04 Javascript
vue2 中二级路由高亮问题及配置方法
Jun 10 Javascript
mpvue实现左侧导航与右侧内容的联动
Oct 21 Javascript
Vue实现背景更换颜色操作
Jul 17 Javascript
JavaScript DOM 添加事件
Feb 14 #Javascript
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
Feb 14 #Javascript
JavaScript实现动态增加文件域表单
Feb 12 #Javascript
从JavaScript 到 JQuery (1)学习小结
Feb 12 #Javascript
谷歌浏览器 insertCell与appendChild的区别
Feb 12 #Javascript
js 判断 enter 事件
Feb 12 #Javascript
JavaScript 克隆数组最简单的方法
Feb 12 #Javascript
You might like
现磨咖啡骗局!现磨咖啡=新鲜咖啡?现磨咖啡背后的猫腻你不懂!
2019/03/28 冲泡冲煮
如何取得中文字符串中出现次数最多的子串
2013/08/08 PHP
完整删除ecshop中获取店铺信息的API
2014/12/24 PHP
PHP的HTTP客户端Guzzle简单使用方法分析
2019/10/30 PHP
jquery.alert 弹出式复选框实现代码
2009/06/15 Javascript
与jquery serializeArray()一起使用的函数,主要来方便提交表单
2011/01/31 Javascript
jquery $.ajax相关用法分享
2012/03/16 Javascript
asp.net刷新本页面的六种方法总结
2014/01/07 Javascript
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
使用ajaxfileupload.js实现上传文件功能
2016/08/13 Javascript
JavaScript中push(),join() 函数 实例详解
2016/09/06 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
2016/09/14 Javascript
Node.js中.pfx后缀文件的处理方法
2017/03/10 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
2017/09/27 Javascript
微信小程序实现购物页面左右联动
2019/02/15 Javascript
JS实现可用滑块滑动的缓动图代码
2019/09/01 Javascript
[53:15]Newbee vs Pain 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python列表(list)常用操作方法小结
2015/02/02 Python
Python函数式编程指南(二):从函数开始
2015/06/24 Python
python 实现对文件夹中的图像连续重命名方法
2018/10/25 Python
浅谈python 导入模块和解决文件句柄找不到问题
2018/12/15 Python
python判断无向图环是否存在的示例
2019/11/22 Python
用pip给python安装matplotlib库的详细教程
2021/02/24 Python
HTML5的语法变化介绍
2013/08/13 HTML / CSS
美国电视购物HSN官网:HSN
2016/09/07 全球购物
英国最大的电子零件及配件零售商:Partmaster
2017/04/24 全球购物
写给爸爸的道歉信
2014/01/15 职场文书
档案工作汇报材料
2014/08/21 职场文书
出资证明书范本(标准版)
2014/09/24 职场文书
校园广播稿100字
2014/10/06 职场文书
党的群众路线教育实践活动个人剖析材料
2014/10/07 职场文书
先进员工事迹材料
2014/12/20 职场文书
教师学期末个人总结
2015/02/13 职场文书
反腐倡廉主题教育活动总结
2015/05/07 职场文书
教师远程培训心得体会
2016/01/09 职场文书
浅谈GO中的Channel以及死锁的造成
2022/03/18 Golang