`
hongtoushizi
  • 浏览: 378626 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

跨域CORS原理及调用具体示例

阅读更多
上篇博客介绍了JSONP原理,其不足,就是只能使用GET提交,若传输的数据量大,这个JSONP方式就歇菜了。那这篇博客就来介绍另一种跨域介绍方案—CORS。
  相对JSONP,CORS支持POST提交,并且实施起来灰常简单,CORS原理只需要向响应头header中注入Access-Control-Allow-Origin,这样浏览器检测到header中的Access-Control-Allow-Origin,则就可以跨域操作了。
  
  具体实现如下:
  前台使用普通的Ajax提交方式,跟普通访问一样,无需更改。
  
  1. $.ajax({  
  2.  url:"http://localhost:8080/crcp/rcp/t99eidt/testcors.do",  
  3.  async :false,  
  4.  type:"POST",  
  5.  success:function(data){  
  6.  var a=JSON.parse(data);  
  7.  var html=JSON.stringify(a.RESULTSET);  
  8.  $("#testcors").html(html);  
  9.  },  
  10.  error:function(){  
  11.  alert("error");  
  12.  }  
  13.  });  
   服务器Action方法如下:
  1.    public void testCors() throws Exception{  
  2. JSONObject jsonObject=new JSONObject();  
  3. List list=new ArrayList();  
  4. for(int i=0;i<4;i++){  
  5. Map paramMap=new HashMap();  
  6. paramMap.put("bank_no", 100+i);  
  7. paramMap.put("money_type", i);  
  8. paramMap.put("bank_name", "测试代码"+i);  
  9. paramMap.put("bank_type", i);  
  10. paramMap.put("bank_status", 0);  
  11. paramMap.put("en_sign_ways", 1);  
  12. list.add(paramMap);  
  13. }  
  14. JSONArray rows=JSONArray.fromObject(list);  
  15. jsonObject.put("RESULTSET", rows);  
  16. HttpServletRequest request=ServletActionContext.getRequest();  
  17. HttpServletResponse response=ServletActionContext.getResponse();  
  18. response.setHeader("Access-Control-Allow-Origin", "*");  
  19. response.setCharacterEncoding("UTF-8");  
  20. Writer out = response.getWriter();  
  21.         System.out.println(jsonObject.toString());  
  22. out.write(jsonObject.toString());  
  23. }  
   response.setHeader("Access-Control-Allow-Origin", "*");这句代码中*代码,服务器允许任何人访问。当然可以设置规定访问的域名。比如只允许http://localhost:8080/crcp这个域下的访问。则把*代替成这个域名即可。
 
   响应图如下:
 CORS实现起来比较简单,但是缺点是支持浏览器有限。目前支持的浏览器版本如下【摘自其他博客】
分享到:
评论

相关推荐

    jquery跨域调用 js跨域调用

    四、jQuery跨域调用示例 ```javascript // JSONP 示例 $.ajax({ url: 'http://example.com/data?callback=?', type: 'GET', dataType: 'jsonp', success: function(data) { console.log(data); } }); // CORS...

    JS跨域调用Window服务代码示例

    然而,为了实现特定功能,如跨域调用Window服务来获取本机硬件信息,我们需要采用一些特殊的技术来规避这种限制。本文将详细介绍如何使用JS进行跨域调用,特别是结合WCF(Windows Communication Foundation)技术和...

    解决Vue调用springboot接口403跨域问题

    解决Vue调用Spring Boot接口时出现的403跨域问题,可以通过在Spring Boot后端添加@CrossOrigin注解或者通过全局配置类来实现CORS支持。需要注意的是,这需要Spring Boot版本至少为2.x,因为旧版本可能不支持CORS相关...

    JS跨域调用WCF服务实例(WCF服务宿主到控制台)

    JavaScript(JS)与Windows Communication Foundation(WCF)服务之间的跨域调用是Web开发中常见的需求,尤其是在构建分布式系统和前后端分离的应用时。本文将详细介绍如何实现JS跨域调用WCF服务,并通过一个控制台...

    Jquery跨域Ajax请求测试

    本示例"Jquery跨域Ajax请求测试"将详细讲解如何利用jQuery实现这一功能。 首先,了解同源策略是理解跨域问题的关键。同源策略是浏览器为了保障用户安全而设定的一项机制,它规定了只有来自同一协议、同一域名和同一...

    provider-coustomer-CORS跨域.zip

    标题 "provider-coustomer-CORS跨域.zip" 暗示了这个压缩包包含的项目是关于在Java环境中,特别是SpringBoot框架下处理CORS(Cross-Origin Resource Sharing,跨源资源共享)的问题。CORS是一种机制,它允许Web应用...

    php版 解决跨域问题CORS ajax+get,post+jsonp例子源代码.zip

    在Web开发中,跨域(Cross-Origin Resource Sharing, CORS)是一个常见的需求,特别是在前后端分离的架构中。PHP、AJAX 和 JSONP 是解决这个问题的三种主要技术。本篇文章将详细探讨这些技术以及它们在跨域请求中的...

    前端跨域原理以及跨域解决方案.docx

    ### 前端跨域原理及解决方案详析 #### 一、引言 在现代互联网技术的快速发展下,跨域问题成为了许多前端开发者不可避免的技术挑战之一。本文将深入探讨前端跨域的基本概念、原理及其解决方案,帮助开发者更好地...

    解决ajax不能访问本地文件问题(利用js跨域原理)

    JSONP的基本原理是动态创建`&lt;script&gt;`标签,将目标URL设置为`src`属性,目标URL会返回一个JavaScript函数调用,其中包含要传递的数据。例如,服务器返回`fun({"data": "Hello, World!"})`,而客户端需要预先定义好`...

    MVC+WebAPI跨域调用.rar

    这个“MVC+WebAPI跨域调用.rar”压缩包文件提供了一个简单的示例,用于演示如何使用jQuery在MVC(Model-View-Controller)框架下调用WebAPI实现跨域通信。 **什么是MVC模式?** MVC是一种流行的设计模式,广泛应用...

    浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法

    以下是一个简单的CORS设置示例: ```php header('Access-Control-Allow-Origin: *'); header('Access-Control-Allow-Methods: GET, POST'); header('Access-Control-Allow-Headers: X-Requested-With, Content-Type...

    WebApiCors 跨域Demo

    这通常通过调用GlobalConfiguration类的EnableCors方法完成,需要提供一个 CORS策略对象,定义允许哪些源、方法和请求头进行跨域请求。 例如,以下代码段展示了如何启用允许所有源的CORS策略: ```csharp var cors...

    [SpringBoot+Ajax]跨域资源共享CORS前后端分离简单演示样例.rar

    本示例将通过一个简单的SpringBoot和Ajax的集成应用,展示如何配置CORS以实现跨域请求。 **一、SpringBoot与Ajax** 1. **SpringBoot**:是基于Spring框架的快速开发工具,简化了配置,提供了自动配置、内嵌Web...

    跨域请求解决方案源代码(JSONP,CORS)

    在提供的压缩包中,`TestAjax`可能是包含实现JSONP和CORS跨域请求的示例代码文件。这个文件可能包含了创建XMLHttpRequest对象、设置请求头、处理响应等内容的JavaScript代码,用于演示如何在实际项目中应用这些跨域...

    js调用webservice示例+源码

    4. **检查跨域设置**:如果使用非IE浏览器,确保服务器端允许跨域请求(CORS)。 5. **尝试使用现代API**:对于非IE浏览器,可以考虑使用XMLHttpRequest或fetch API,这些API提供更丰富的错误处理和跨域支持。 一旦...

    Tomcat配置解决跨域问题

    然而,在进行前后端分离或者API调用时,跨域限制可能会成为开发的障碍。Tomcat,作为广泛使用的Java Servlet容器,提供了解决跨域问题的配置方法。 【描述】:“亲证可用,真实有效,压缩包里有使用的具体说明,...

    jquery跨域调用wcf

    总结,JQuery调用跨域WCF服务主要通过JSONP和CORS两种方式,涉及到服务端的配置以及客户端的请求设置。正确理解和使用这些技术,可以有效地在不同域之间实现数据交互。在实际项目中,应结合业务需求和安全因素选择...

    iframe跨域访问示例

    在实际应用中,选择哪种跨域方法取决于具体的需求,如兼容性、安全性、数据交换的复杂性等。同时,开发者需要注意跨域访问可能带来的安全风险,如XSS(跨站脚本攻击)和CSRF(跨站请求伪造)。 综上所述,iframe...

    解决JQurey跨域问题$.get|$.post|$.getJSON等等统统可跨域

    2. CORS:CORS是现代浏览器支持的一种更安全、更灵活的跨域方式。$.ajax、$.get、$.post等方法都可以通过设置headers来启用CORS。 - 在服务器端,设置响应头`Access-Control-Allow-Origin`为允许跨域的源,例如`*`...

Global site tag (gtag.js) - Google Analytics