`
zy116494718
  • 浏览: 476735 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

跨域传参问题与解决方案

 
阅读更多

域(Domain)是Windows网络中独立运行的单位,域之间相互访问则需要建立信任关系(即Trust Relation)。信任关系是连接在域与域之间的桥梁。当一个域与其他域建立了信任关系后,2个域之间不但可以按需要相互进行管理,还可以跨网分配文件和打印机等设备资源,使不同的域之间实现网络资源的共享与管理。有一种简明的说法来解释广域跨域:跨域访问,简单来说就是 A 网站的 javascript 代码试图访问 B 网站,包括提交内容和获取内容。由于安全原因,跨域访问是被各大浏览器所默认禁止的。

在广域网环境中,由于浏览器的安全限制,网络连接的跨域访问时不被允许的,XmlHttpRequest也不例外。但有时候跨域访问资源是必需的。

同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说,受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容,以防止它们之间的操作。同源策略不阻止将动态脚本元素插入文档中。

 

不同域下的js可以相互访问,如:

 www.a.com中通过 <script language="javascript" src="http://www.b.com:8088/sari/scripts/zy.js"></script> 可以访问www.b.com的zy.js

 

 

跨域传参解决方案1:

在浏览器中不能直接来跨域访问,而在服务器端没有跨域安全限制。这样的话,可以在服务端完成跨域访问,而在客户端来取得结果就可以了。这样做的缺点则是需要修改服务器端得代码。

 

 

跨域传参解决方案2:通过AJAX

 

由于Javascript 的安全机制,脚本是不允许跨域的 ( 安全的问题,浏览器默认是不支持跨域调用的 ) 。后来出现了一种叫 JSON with Padding  的技术,简称  JSONP  .(原理参考 http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/ ),应用 JSONP 可以实现 JSON 数据的跨域调用, jQuery getJSON 放在 1.2 版本中已经能够跨域获取数据了。

 

首先修改hosts文件,以模拟两个域。

 

192.168.100.22  www.a.com

192.168.100.22  www.b.com

 

两个域名对应不同的工程:

www.a.com  HuoDong

www.b.com  sari

 

ps: www.a.com/HuoDongwww.b.com/sari 属于同一个域。

 

然后用www.a.com来访问www.b.com的一个方法,www.b.com返回json对象给www.a.com

 

HuoDong工程的jsp:

$.ajax({ 
     type:"GET", //请求方式
     url:"http://www.yue.com:8088/sari/samples/samples_viewParent.ac?jsoncallback=?", //必须有jsoncallback=?,否则请求将被游览器拒绝
     cache: false,   
     data:"age="+$("input:eq(0)").val(),  //传参
     dataType: "json",   //返回值类型
     success:function(json){     
      
        alert(json);
     
                 }
     });

 

 sari的Aciton:

 

public void doViewParentSubmit() throws GeneralException {
	// TODO Auto-generated method stub
	String Id = getRequest().getParameter("Id");
	String jsoncallback = getRequest().getParameter("jsoncallback");  //必须有,否则无法返回json数据给a
	List list = new ArrayList();
	list.add("11");
	list.add("22");
	
    try {
    	JSONArray j = JSONArray.fromObject(list);
		PrintWriter p = getResponse().getWriter();
		
		p.print(jsoncallback+"("+j+")");  
		p.close(); 
         } catch (IOException e) {
	     e.printStackTrace(); 
         }

}

 

注意:

1 这里调用的地址中jsoncallback=? 是关键的所在!其中,符号会被 Query 自动替换成其他的回调方法的名称,具体过程和原理我们这里不理会。我们关心的是 jsoncallback=? 起什么作用了?原来 jsoncallback=? 被替换后,会把方法名称传给服务器。我们在服务器端要做什么工作呢?服务器要接受参数 jsoncallback ,然后把 jsoncallback 的值作为 JSON 数据方法名称返回 .

2 服务器段把jsoncallback 的值作为方法名传回来 .

3 输出json 数据时候 { 之前的是 (

 

3 通过ifream

   在www.a.com中用

  

<a href="http://www.b.com:8088/sari/samples/samples_viewParent.ac" id="a1" name="a1.html" target="i">1</a>
          <iframe src="" id="iframe" name="i"></iframe>

   ifream中可以得到www.b.com中的json对象

 

另:

     判断两个地址是否跨域,是看该网页的document.domain,如果两个网页的该值不相同,则属于

     跨域,例如:bbs.baidu.com 和 tieba.baidu.com虽然是都是二级域名,但是document.domain不相同话

依然属于跨域,所以还有一个解决跨域的问题就是在前台JSP页面中把两个地址的document.domain 设为一样的。如

 if(location.href.indexOf("home.news.cn") != -1) {
    document.domain = "home.news.cn";
}

  这样的话jnduan.home.news.cn和root.home.news.cn就不算跨域了。

 

    

 

 

0
1
分享到:
评论

相关推荐

    利用window.name跨域解决方案Demo.rar

    本Demo实现了一个来自不同服务器的前端页面集成方案,页面间通过window窗口关系形成父子页面关系,跨域情况下父子页面间彼此看不见对方的DOM和js对象,无法直接进行数据交互。本方案从父页面到子页面数据传递采用url...

    vue路由传参页面刷新参数丢失问题解决方案

    在Vue.js应用中,路由传参是一种常见的功能,用于在不同组件之间传递数据。然而,当页面被刷新时,通过`params`或`route`属性...在开发过程中,不断探索和尝试不同的解决方案,可以提高问题解决能力,拓宽技术视野。

    全新JAVAEE大神完美就业实战课程 超150G巨制课程轻松实战JAVAEE课程 就业部分.txt

    17跨域解决方案与提交订单 18微信扫码支付 19秒杀解决方案 20品优购系统业务分析 1集群概述 2Zookeeper集群 2品优购电商系统部署 3SolrCloud集群 4RedisCluster集群 5开源数据库中间件-MyCat 6Nginx...

    iframe子向父传值实例.rar

    本示例“iframe子向父传值实例”旨在提供一个解决方案,帮助开发者应对跨域问题,从而实现iframe内部页面与外部页面的数据通信。 首先,我们来理解`iframe`的基本概念。`iframe`(Inline Frame)是HTML中的一个元素...

    flash与C#通信 CallFunction 出现COM组件错误的处理

    通过以上分析和解决方案,我们可以有效地解决Flash与C#通信过程中出现的`CallFunction`方法错误问题。需要注意的是,在实际开发中还需要考虑到其他潜在的问题,比如跨域限制、权限问题等,这些都需要根据具体情况来...

    Flex iframe 向jsp中传参示例

    Flex技术是由Adobe公司开发的一种富互联网应用(RIA)解决方案,主要应用于开发基于Web的应用程序和桌面应用程序。Flex使用基于XML的标记语言MXML(Macromedia XML)和ActionScript脚本语言来构建用户界面和程序逻辑...

    面试题资源,涉及vue,js,node,html,css,webpack等等

    8. 跨域解决方案:jsonp跨域、document.domain + iframe 跨域、nodejs中间件代理跨域、后端在头部信息中设置安全域名。 9. 严格模式的限制:变量必须声明后再使用,函数的参数不能有同名属性,否则报错,不能使用...

    详解解决使用axios发送json后台接收不到的问题

    下面将详细解释问题的成因以及解决方案。 **问题描述** 在尝试使用axios发送JSON数据给后端服务器时,可能会遇到一个情况,即后端接收到的数据为空,请求始终停留在OPTIONS阶段。开发者可能会检查接口、设置headers...

    my_antd_design_pro.pptx

    本资源可以帮助前端开发人员更容易的上手antd design pro 1、生成器函数、fetch交互(头部信息、token选择性传参等)、路由、saga等js...3、跨域解决方案(proxy) 4、命名空间(namespace) 5、ant design pro文件介绍

    前端web知识点

    #### 五、跨域问题及解决方案 - **跨域概念**:在 Web 开发中,当 AJAX 请求的目标 URL 与当前网页所在的域名、端口或协议有任何一项不同,则被视为跨域请求。 - **解决方案**: - **JSONP**:通过向服务器请求一...

    查找iframe里元素的方法可传参

    如果它们位于不同的域,那么我们需要考虑跨域解决方案,这通常涉及到服务器端的设置和CORS(跨源资源共享)策略。 总的来说,查找`iframe`中的元素并进行操作是Web开发中的常见需求,通过正确地访问`iframe`的`...

    单点登录SSO-图示与讲解

    ### 单点登录(SSO)知识点详解 #### 概述 单点登录(Single Sign-On,简称SSO)是一种身份认证机制,允许用户通过一次...这对于开发人员来说是非常宝贵的资源,可以帮助他们在实际项目中更加高效地实施SSO解决方案。

    jQuery ajax方法传递中文时出现中文乱码的解决方法

    本文将详细解释这个问题,并提供有效的解决方案。 首先,我们要理解AJAX(Asynchronous JavaScript and XML)的核心是通过XMLHttpRequest对象与服务器进行异步数据交换。当传递包含中文字符的数据时,如果编码处理...

    vue2 以及小程序面试题文档,帮助你快速了解,vue2框架以及小程序的核心

    2.5 Vuex的弊端及解决方案:状态过多可能导致复杂性增加,可以通过合理划分模块和组件职责来减轻问题。 【Vue路由面试题】 3. Vue路由有几种模式?主要有hash模式和history模式。hash模式利用URL的#进行路由,...

    C#进阶系列--WebApi

    C#进阶系列——WebApi 异常处理解决方案 ......................................................................................................................... 23 一、使用异常筛选器捕获所有异常 .........

Global site tag (gtag.js) - Google Analytics