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 相关文章推荐
PNG背景在不同浏览器下的应用
Jun 22 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
Aug 03 Javascript
调用innerHTML之后onclick失效问题的解决方法
Jan 28 Javascript
jQuery表格插件datatables用法总结
Sep 05 Javascript
js滚轮事件兼容性问题需要注意哪些
Nov 15 Javascript
浅谈js中的变量名和函数名重名
Feb 13 Javascript
Vue中定义全局变量与常量的各种方式详解
Aug 23 Javascript
webpack3之loader全解析
Oct 26 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
Dec 29 Javascript
require.js 加载过程与使用方法介绍
Oct 30 Javascript
详解Vue-Router源码分析路由实现原理
May 15 Javascript
javascript异常处理实现原理详解
Feb 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
php使用sql数据库 获取字段问题介绍
2013/08/12 PHP
php通过array_merge()函数合并关联和非关联数组的方法
2015/03/18 PHP
[原创]php实现 data url的图片生成与保存
2016/12/04 PHP
javascript引导程序
2008/10/26 Javascript
prettify 代码高亮着色器google出品
2010/12/28 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
2013/12/23 Javascript
深入分析jquery解析json数据
2014/12/09 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
2015/01/18 Javascript
javascript实现验证身份证号的有效性并提示
2015/04/30 Javascript
javasript实现密码的隐藏与显示
2015/05/08 Javascript
JQ实现新浪游戏首页幻灯片
2015/07/29 Javascript
聊一聊JavaScript作用域和作用域链
2016/05/03 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
2016/05/10 Javascript
jQuery 3.0十大新特性最终版发布
2016/07/14 Javascript
手机注册发送验证码倒计时的简单实例
2017/11/15 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
2018/07/05 Javascript
详解ES6中class的实现原理
2020/10/03 Javascript
[06:42]DOTA2每周TOP10 精彩击杀集锦vol.1
2014/06/25 DOTA
[02:05]2014DOTA2西雅图邀请赛 专访啸天mik夫妻档
2014/07/08 DOTA
Pyramid添加Middleware的方法实例
2013/11/27 Python
Python3处理文件中每个词的方法
2015/05/22 Python
浅谈Django的缓存机制
2018/08/23 Python
django主动抛出403异常的方法详解
2019/01/04 Python
详解Python安装tesserocr遇到的各种问题及解决办法
2019/03/07 Python
Python多线程threading模块用法实例分析
2019/05/22 Python
pyqt5实现按钮添加背景图片以及背景图片的切换方法
2019/06/13 Python
Django 框架模型操作入门教程
2019/11/05 Python
pytorch 实现将自己的图片数据处理成可以训练的图片类型
2020/01/08 Python
Python如何操作office实现自动化及win32com.client的运用
2020/04/01 Python
物理系毕业生自荐信
2013/11/01 职场文书
研究生求职推荐信范文
2013/11/30 职场文书
学校岗位设置方案
2014/01/16 职场文书
技校毕业生自荐信范文
2014/03/07 职场文书
营业用房租赁协议书
2014/11/26 职场文书
酒店仓管员岗位职责
2015/04/01 职场文书
Python如何使用循环结构和分支结构
2022/04/13 Python