`
hai0378
  • 浏览: 533772 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

CROS 跨域资源共享

 
阅读更多

4.5 解决跨域问题

比如,前端应用为静态站点且部署在http://web.xxx.com域下,后端应用发布REST API并部署在http://api.xxx.com域下,如何使前端应用通过AJAX跨域访问后端应用呢?这需要使用到CORS技术来实现,这也是目前最好的解决方案了。

[CORS全称为Cross Origin Resource Sharing(跨域资源共享),服务端只需添加相关响应头信息,即可实现客户端发出AJAX跨域请求。]

CORS技术非常简单,易于实现,目前绝大多数浏览器均已支持该技术(IE8浏览器也支持了),服务端可通过任何编程语言来实现,只要能将CORS响应头写入response对象中即可。

下面我们继续扩展REST框架,通过CORS技术实现AJAX跨域访问。

首先,我们需要编写一个Filter,用于过滤所有的HTTP请求,并将CORS响应头写入response对象中,代码如下:

 

[java] view plaincopy
 
  1. public class CorsFilter implements Filter {  
  2.   
  3.     private String allowOrigin;  
  4.     private String allowMethods;  
  5.     private String allowCredentials;  
  6.     private String allowHeaders;  
  7.     private String exposeHeaders;  
  8.   
  9.     @Override  
  10.     public void init(FilterConfig filterConfig) throws ServletException {  
  11.         allowOrigin = filterConfig.getInitParameter("allowOrigin");  
  12.         allowMethods = filterConfig.getInitParameter("allowMethods");  
  13.         allowCredentials = filterConfig.getInitParameter("allowCredentials");  
  14.         allowHeaders = filterConfig.getInitParameter("allowHeaders");  
  15.         exposeHeaders = filterConfig.getInitParameter("exposeHeaders");  
  16.     }  
  17.   
  18.     @Override  
  19.     public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {  
  20.         HttpServletRequest request = (HttpServletRequest) req;  
  21.         HttpServletResponse response = (HttpServletResponse) res;  
  22.         if (StringUtil.isNotEmpty(allowOrigin)) {  
  23.             List<String> allowOriginList = Arrays.asList(allowOrigin.split(","));  
  24.             if (CollectionUtil.isNotEmpty(allowOriginList)) {  
  25.                 String currentOrigin = request.getHeader("Origin");  
  26.                 if (allowOriginList.contains(currentOrigin)) {  
  27.                     response.setHeader("Access-Control-Allow-Origin", currentOrigin);  
  28.                 }  
  29.             }  
  30.         }  
  31.         if (StringUtil.isNotEmpty(allowMethods)) {  
  32.             response.setHeader("Access-Control-Allow-Methods", allowMethods);  
  33.         }  
  34.         if (StringUtil.isNotEmpty(allowCredentials)) {  
  35.             response.setHeader("Access-Control-Allow-Credentials", allowCredentials);  
  36.         }  
  37.         if (StringUtil.isNotEmpty(allowHeaders)) {  
  38.             response.setHeader("Access-Control-Allow-Headers", allowHeaders);  
  39.         }  
  40.         if (StringUtil.isNotEmpty(exposeHeaders)) {  
  41.             response.setHeader("Access-Control-Expose-Headers", exposeHeaders);  
  42.         }  
  43.         chain.doFilter(req, res);  
  44.     }  
  45.   
  46.     @Override  
  47.     public void destroy() {  
  48.     }  
  49. }  
 

以上CorsFilter将从web.xml中读取相关Filter初始化参数,并将在处理HTTP请求时将这些参数写入对应的CORS响应头中,下面大致描述一下这些CORS响应头的意义:

 

  • Access-Control-Allow-Origin:允许访问的客户端域名,例如:http://web.xxx.com,若为*,则表示从任意域都能访问,即不做任何限制。
  • Access-Control-Allow-Methods:允许访问的方法名,多个方法名用逗号分割,例如:GET,POST,PUT,DELETE,OPTIONS。
  • Access-Control-Allow-Credentials:是否允许请求带有验证信息,若要获取客户端域下的cookie时,需要将其设置为true。
  • Access-Control-Allow-Headers:允许服务端访问的客户端请求头,多个请求头用逗号分割,例如:Content-Type。
  • Access-Control-Expose-Headers:允许客户端访问的服务端响应头,多个响应头用逗号分割。

需要注意的是,CORS规范中定义Access-Control-Allow-Origin只允许两种取值,要么为*,要么为具体的域名,也就是说,不支持同时配置多个域名。为了解决跨多个域的问题,需要在代码中做一些处理,这里将Filter初始化参数作为一个域名的集合(用逗号分隔),只需从当前请求中获取Origin请求头,就知道是从哪个域中发出的请求,若该请求在以上允许的域名集合中,则将其放入Access-Control-Allow-Origin响应头,这样跨多个域的问题就轻松解决了。

以下是web.xml中配置CorsFilter的方法:

 

[xml] view plaincopy
 
  1. <filter>  
  2.     <filter-name>corsFilter</filter-name>  
  3.     <filter-class>com.xxx.api.cors.CorsFilter</filter-class>  
  4.     <init-param>  
  5.         <param-name>allowOrigin</param-name>  
  6.         <param-value>http://web.xxx.com</param-value>  
  7.     </init-param>  
  8.     <init-param>  
  9.         <param-name>allowMethods</param-name>  
  10.         <param-value>GET,POST,PUT,DELETE,OPTIONS</param-value>  
  11.     </init-param>  
  12.     <init-param>  
  13.         <param-name>allowCredentials</param-name>  
  14.         <param-value>true</param-value>  
  15.     </init-param>  
  16.     <init-param>  
  17.         <param-name>allowHeaders</param-name>  
  18.         <param-value>Content-Type</param-value>  
  19.     </init-param>  
  20. </filter>  
  21. <filter-mapping>  
  22.     <filter-name>corsFilter</filter-name>  
  23.     <url-pattern>/*</url-pattern>  
  24. </filter-mapping>  

完成以上过程即可实现AJAX跨域功能了,但似乎还存在另外一个问题,由于REST是无状态的,后端应用发布的REST API可在用户未登录的情况下被任意调用,这显然是不安全的,如何解决这个问题呢?我们需要为REST请求提供安全机制。

分享到:
评论

相关推荐

    vue+springboot实现项目的CORS跨域请求

    跨域资源共享CORS(Cross-origin Resource Sharing),是W3C的一个标准,允许浏览器向跨源的服务器发起XMLHttpRequest请求,克服ajax请求只能同源使用的限制。关于CORS的详细解读,可参考阮一峰大神的博客:跨域资源...

    跨域cors扩展插件chrome

    CORS(Cross-Origin Resource Sharing,跨源资源共享)是一种机制,它允许浏览器在请求跨域资源时与服务器协商,通过特定的HTTP头部实现跨域访问。 描述中提到的“备用下”,意味着这个插件可能是开发者在主用工具...

    在各种服务器(nginx,apache,tomcat)上设置CORS跨域设置.zip

    跨域资源共享(CORS,Cross-Origin Resource Sharing)是一种机制,允许Web应用从不同的源(比如不同的域名、协议或端口)获取资源。由于浏览器的安全策略,通常不允许这种跨域请求,但CORS通过添加特定的HTTP头部...

    【C#/Web】最简单的WEB API跨域方法

    首先,我们需要理解什么是CORS(Cross-Origin Resource Sharing,跨源资源共享)。CORS是一种机制,通过添加额外的HTTP头部,让浏览器知道服务器是否允许跨域请求。在Web API项目中,我们可以通过配置CORS中间件来...

    使用Spring CROS解决项目中的跨域问题详解

    跨域问题的出现是因为浏览器的同源策略限制,导致不同域名之间无法共享资源。为了解决这个问题,开发者们不得不想出各种解决方案。其中,使用Spring CROS是其中的一种。 CROS(Cross-Origin Resource Sharing)是一...

    layui-table-cros:layui表格跨域请求

    跨域资源共享(CORS,Cross-Origin Resource Sharing)是一种W3C标准,允许浏览器向非同源服务器发起XMLHttpRequest请求。由于浏览器的同源策略限制,如果没有CORS支持,这些请求会被阻止。因此,layui表格在请求非...

    CORS 跨域配置和jar文件

    此时,CORS(Cross-Origin Resource Sharing,跨域资源共享)机制应运而生,它允许服务器放宽同源策略,使得来自不同源的请求能够访问资源。 **一、CORS的基本概念** CORS是通过在HTTP头信息中添加特定字段来实现...

    Spring 跨域解决方案官方 demo

    在现代Web开发中,跨域资源共享(CORS)是一个重要的概念,它允许浏览器在不同源之间发送Ajax请求。Spring框架提供了内置支持来处理CORS,使得开发者能够方便地配置跨域请求。本教程将深入探讨Spring提供的CORS解决...

    谷歌跨域插件allow-cors-access-control.zip

    跨域资源共享(CORS)是一种机制,它允许Web应用程序从不同的源请求资源,比如JavaScript通过Ajax从非同源的服务器获取数据。在默认情况下,由于浏览器的同源策略限制,这种跨域请求会被阻止。CORS通过设置特定的...

    详解springboot设置cors跨域请求的两种方式

    CORS(Cross-Origin Resource Sharing,跨域资源共享)是一种机制,它允许 Web 应用服务器进行跨域资源共享。 在本文中,我们将介绍两种设置 CORS 跨域请求的方式。 方式一:使用 CorsFilter 第一种方式是使用 ...

    ThinkPHP 5.1 跨域配置方法

    在Web开发中,跨域资源共享(Cross-Origin Resource Sharing, CORS)是一个重要的概念,它允许一个域(域名、协议或端口)的前端代码访问另一个域的资源。在ThinkPHP 5.1框架中,正确配置跨域支持对于前后端分离的...

    vue-springboot-cros_jsonp:前初步跨域,cors,jsonp(新版springmvc)实现

    CORS是跨域资源共享的一种机制,允许浏览器在发送请求到不同源的服务器时,通过特定的HTTP头部来安全地进行。在Spring Boot中,可以通过添加`@CrossOrigin`注解到控制器方法或者全局配置,来允许特定来源的跨域请求...

    SpringCloud Gateway跨域配置代码实例

    跨域配置是指在不同的源之间共享资源时,如何配置服务器以允许跨域请求。SpringCloud Gateway 提供了强大的跨域配置功能,通过配置可以实现跨域请求的控制。 首先,让我们了解什么是跨域请求。跨域请求是指从一个...

    允许CORS:访问控制_-_允许来源「Allow_CORS__Access-Control-Allow-Origin」_0_1_1_0_10_18_38.zip

    **CORS(Cross-Origin Resource Sharing)跨域资源共享**是一种机制,它使用额外的HTTP头部来告诉浏览器允许一个页面从不同的源加载资源。在Web应用程序中,由于同源策略的限制,浏览器不允许JavaScript从不同的域名...

    gs-rest-service-cors:为RESTful Web服务启用跨源请求

    目录本指南将引导您完成使用Spring创建“ Hello,World” RESTful Web服务的过程,该服务在响应中包括跨域资源共享(CORS)的标头。 您可以在此找到有关Spring CORS支持的更多信息。你会建立什么您将构建一个服务,...

    js代码-CROS,JSONP

    JavaScript是Web开发中不可或缺的一部分,尤其在跨域通信方面,CORS(Cross-Origin Resource Sharing,跨源资源共享)和JSONP(JSON with Padding)是两种常见的解决方案。本文将深入探讨这两种技术,以及它们如何...

    jQuery+formdata实现上传进度特效遇到的问题

    服务器端必须允许跨域资源共享(CORS),通过设置适当的HTTP头部来允许跨域请求。例如,在PHP中,可以通过header函数发送Access-Control-Allow-Origin头部来允许来自指定域名的跨域请求。 开发者可能会遇到的一个...

    Cross Domain - CORS-crx插件

    访问网站:https://devratroom.blogspot.com/p/cross-domain-cors-extension.html 交叉域将帮助您处理跨域 - 跨起源资源共享(CORS)问题。 这是一个小型工具将有助于与跨域问题面对的Web开发人员和相关域。 列表:...

    cors-unblocker:绕过 CORS 的简单免费代理

    CORS(Cross-Origin Resource Sharing,跨源资源共享)是Web浏览器为保护用户数据而实施的一种安全策略,限制了脚本从不同源获取资源的能力。当一个请求的源与目标资源的域、协议或端口不同时,浏览器会执行CORS检查...

    HTML5 WEBGL 摇杆+按钮

    CORS(Cross-Origin Resource Sharing)是浏览器的一项安全策略,限制了不同源的网站之间共享资源。当在本地文件系统直接打开HTML文件时,由于没有服务器环境,浏览器会默认开启同源策略,导致跨域请求失败,因此...

Global site tag (gtag.js) - Google Analytics