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 相关文章推荐
浅析tr的隐藏和显示问题
Mar 05 Javascript
Javascript6中字符串的四个新用法分享
Sep 11 Javascript
JS实现动态修改table及合并单元格的方法示例
Feb 20 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
Mar 22 Javascript
Node.JS文件系统解析实例详解
May 15 Javascript
深入浅析Vue中的Prop
Jun 10 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
Aug 13 Javascript
react 移动端实现列表左滑删除的示例代码
Jul 04 Javascript
JS实现拼图游戏
Jan 29 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
Jun 05 Javascript
原生JS实现音乐播放器的示例代码
Feb 25 Javascript
JavaScript架构搭建前端监控如何采集异常数据
Jun 25 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 chmod 函数与批量修改文件目录权限
2010/05/10 PHP
php+js实现图片的上传、裁剪、预览、提交示例
2013/08/27 PHP
PHP中的empty、isset、isnull的区别与使用实例
2019/03/22 PHP
JavaScript 版本自动生成文章摘要
2008/07/23 Javascript
javascript 从if else 到 switch case 再到抽象
2010/07/17 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
2011/09/29 Javascript
用Jquery实现滚动新闻
2014/02/12 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
2014/03/12 Javascript
jQuery.holdReady()使用方法
2014/05/20 Javascript
使用js画图之画切线
2015/01/12 Javascript
JS动画效果打开、关闭层的实现方法
2015/05/09 Javascript
浅谈使用MVC模式进行JavaScript程序开发
2015/11/10 Javascript
javascript的 {} 语句块详解
2016/02/27 Javascript
Javascript使用uploadify来实现多文件上传
2016/11/16 Javascript
详解Bootstrap各式各样的按钮(推荐)
2016/12/13 Javascript
深入理解JS继承和原型链的问题
2016/12/17 Javascript
求js数组的最大值和最小值的四种方法
2017/03/03 Javascript
微信小程序picker组件下拉框选择input输入框的实例
2017/09/20 Javascript
基于模板引擎Jade的应用(详解)
2017/12/12 Javascript
JavaScript实现简单的文本逐字打印效果示例
2018/04/12 Javascript
vue项目部署到nginx/tomcat服务器的实现
2019/08/26 Javascript
详解Vue3 Composition API中的提取和重用逻辑
2020/04/29 Javascript
[59:32]Liquid vs Fnatic 2019国际邀请赛淘汰赛败者组BO1 8.20.mp4
2020/07/19 DOTA
python基础之入门必看操作
2017/07/26 Python
Python实现PS滤镜碎片特效功能示例
2018/01/24 Python
Django中间件基础用法详解
2019/07/18 Python
Django--权限Permissions的例子
2019/08/28 Python
使用Django xadmin 实现修改时间选择器为不可输入状态
2020/03/30 Python
浅谈Keras的Sequential与PyTorch的Sequential的区别
2020/06/17 Python
Woods官网:加拿大最古老、最受尊敬的户外品牌之一
2020/09/12 全球购物
全神贯注教学反思
2014/02/03 职场文书
优秀员工推荐信
2014/05/10 职场文书
秋季校运会广播稿100字
2014/09/18 职场文书
2015年纪检监察工作总结
2015/04/08 职场文书
golang特有程序结构入门教程
2021/06/02 Python
Python实战之大鱼吃小鱼游戏的实现
2022/04/01 Python