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 相关文章推荐
贴一个在Mozilla中常用的Javascript代码
Jan 09 Javascript
javascript 写类方式之四
Jul 05 Javascript
javascript学习笔记(三) String 字符串类型介绍
Jun 19 Javascript
JS对文本框值的判断示例
Mar 10 Javascript
编程语言JavaScript简介
Oct 16 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
Feb 28 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
May 03 Javascript
微信开发 消息推送实现代码
Oct 21 Javascript
详解AngularJS验证、过滤器、指令
Jan 04 Javascript
JavaScript动态绑定详解
Sep 14 Javascript
React中使用UEditor百度富文本的方法
Aug 22 Javascript
小程序实现上下切换位置
Nov 16 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
PHP图片上传代码
2013/11/04 PHP
用PHP代替JS玩转DOM的思路及示例代码
2014/06/15 PHP
ThinkPHP模板中数组循环实例
2014/10/30 PHP
JS检测输入字符是否包含非法字符的示例代码
2014/02/11 Javascript
node.js集成百度UE编辑器
2015/02/05 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
2015/04/12 Javascript
理解JavaScript的变量的入门教程
2015/07/07 Javascript
详解JavaScript的Date对象(制作简易钟表)
2020/04/07 Javascript
JS中sort函数排序用法实例分析
2016/06/16 Javascript
springMVC结合AjaxForm上传文件
2016/07/12 Javascript
jQuery Checkbox 全选 反选的简单实例
2016/11/29 Javascript
jquery实现超简单的瀑布流布局【推荐】
2017/03/08 Javascript
详解Ubuntu安装angular-cli遇到的坑
2018/09/08 Javascript
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
js操作两个json数组合并、去重,以及删除某一项元素
2020/09/22 Javascript
python实现对一个完整url进行分割的方法
2015/04/29 Python
Python网络编程中urllib2模块的用法总结
2016/07/12 Python
分数霸榜! python助你微信跳一跳拿高分
2018/01/08 Python
python微信跳一跳游戏辅助代码解析
2018/01/29 Python
利用python库在局域网内传输文件的方法
2018/06/04 Python
python读取Excel实例详解
2018/08/17 Python
在python中对变量判断是否为None的三种方法总结
2019/01/23 Python
Python3.5实现的罗马数字转换成整数功能示例
2019/02/25 Python
Python参数解析模块sys、getopt、argparse使用与对比分析
2019/04/02 Python
Python使用crontab模块设置和清除定时任务操作详解
2019/04/09 Python
好药师网上药店:安全合法的网上药品零售药房
2017/02/15 全球购物
Tarte Cosmetics官网:美国最受欢迎的化妆品公司之一
2017/08/24 全球购物
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
阿玛瑞酒店中文官方网站:Amari.com
2018/02/13 全球购物
PHP如何调用MYSQL存储过程
2014/05/30 面试题
理财投资建议书
2014/03/12 职场文书
中学清明节活动总结
2014/07/04 职场文书
2014年小学重阳节活动策划方案
2014/09/16 职场文书
实习证明格式范文
2014/10/14 职场文书
关于CSS浮动与取消浮动的问题
2021/06/28 HTML / CSS
Java基础之详解HashSet的使用方法
2021/06/30 Java/Android