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对象中,代码如下:
- public class CorsFilter implements Filter {
- private String allowOrigin;
- private String allowMethods;
- private String allowCredentials;
- private String allowHeaders;
- private String exposeHeaders;
- @Override
- public void init(FilterConfig filterConfig) throws ServletException {
- allowOrigin = filterConfig.getInitParameter("allowOrigin");
- allowMethods = filterConfig.getInitParameter("allowMethods");
- allowCredentials = filterConfig.getInitParameter("allowCredentials");
- allowHeaders = filterConfig.getInitParameter("allowHeaders");
- exposeHeaders = filterConfig.getInitParameter("exposeHeaders");
- }
- @Override
- public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
- HttpServletRequest request = (HttpServletRequest) req;
- HttpServletResponse response = (HttpServletResponse) res;
- if (StringUtil.isNotEmpty(allowOrigin)) {
- List<String> allowOriginList = Arrays.asList(allowOrigin.split(","));
- if (CollectionUtil.isNotEmpty(allowOriginList)) {
- String currentOrigin = request.getHeader("Origin");
- if (allowOriginList.contains(currentOrigin)) {
- response.setHeader("Access-Control-Allow-Origin", currentOrigin);
- }
- }
- }
- if (StringUtil.isNotEmpty(allowMethods)) {
- response.setHeader("Access-Control-Allow-Methods", allowMethods);
- }
- if (StringUtil.isNotEmpty(allowCredentials)) {
- response.setHeader("Access-Control-Allow-Credentials", allowCredentials);
- }
- if (StringUtil.isNotEmpty(allowHeaders)) {
- response.setHeader("Access-Control-Allow-Headers", allowHeaders);
- }
- if (StringUtil.isNotEmpty(exposeHeaders)) {
- response.setHeader("Access-Control-Expose-Headers", exposeHeaders);
- }
- chain.doFilter(req, res);
- }
- @Override
- public void destroy() {
- }
- }
以上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的方法:
- <filter>
- <filter-name>corsFilter</filter-name>
- <filter-class>com.xxx.api.cors.CorsFilter</filter-class>
- <init-param>
- <param-name>allowOrigin</param-name>
- <param-value>http://web.xxx.com</param-value>
- </init-param>
- <init-param>
- <param-name>allowMethods</param-name>
- <param-value>GET,POST,PUT,DELETE,OPTIONS</param-value>
- </init-param>
- <init-param>
- <param-name>allowCredentials</param-name>
- <param-value>true</param-value>
- </init-param>
- <init-param>
- <param-name>allowHeaders</param-name>
- <param-value>Content-Type</param-value>
- </init-param>
- </filter>
- <filter-mapping>
- <filter-name>corsFilter</filter-name>
- <url-pattern>/*</url-pattern>
- </filter-mapping>
完成以上过程即可实现AJAX跨域功能了,但似乎还存在另外一个问题,由于REST是无状态的,后端应用发布的REST API可在用户未登录的情况下被任意调用,这显然是不安全的,如何解决这个问题呢?我们需要为REST请求提供安全机制。
相关推荐
跨域资源共享CORS(Cross-origin Resource Sharing),是W3C的一个标准,允许浏览器向跨源的服务器发起XMLHttpRequest请求,克服ajax请求只能同源使用的限制。关于CORS的详细解读,可参考阮一峰大神的博客:跨域资源...
CORS(Cross-Origin Resource Sharing,跨源资源共享)是一种机制,它允许浏览器在请求跨域资源时与服务器协商,通过特定的HTTP头部实现跨域访问。 描述中提到的“备用下”,意味着这个插件可能是开发者在主用工具...
跨域资源共享(CORS,Cross-Origin Resource Sharing)是一种机制,允许Web应用从不同的源(比如不同的域名、协议或端口)获取资源。由于浏览器的安全策略,通常不允许这种跨域请求,但CORS通过添加特定的HTTP头部...
首先,我们需要理解什么是CORS(Cross-Origin Resource Sharing,跨源资源共享)。CORS是一种机制,通过添加额外的HTTP头部,让浏览器知道服务器是否允许跨域请求。在Web API项目中,我们可以通过配置CORS中间件来...
跨域问题的出现是因为浏览器的同源策略限制,导致不同域名之间无法共享资源。为了解决这个问题,开发者们不得不想出各种解决方案。其中,使用Spring CROS是其中的一种。 CROS(Cross-Origin Resource Sharing)是一...
跨域资源共享(CORS,Cross-Origin Resource Sharing)是一种W3C标准,允许浏览器向非同源服务器发起XMLHttpRequest请求。由于浏览器的同源策略限制,如果没有CORS支持,这些请求会被阻止。因此,layui表格在请求非...
此时,CORS(Cross-Origin Resource Sharing,跨域资源共享)机制应运而生,它允许服务器放宽同源策略,使得来自不同源的请求能够访问资源。 **一、CORS的基本概念** CORS是通过在HTTP头信息中添加特定字段来实现...
在现代Web开发中,跨域资源共享(CORS)是一个重要的概念,它允许浏览器在不同源之间发送Ajax请求。Spring框架提供了内置支持来处理CORS,使得开发者能够方便地配置跨域请求。本教程将深入探讨Spring提供的CORS解决...
跨域资源共享(CORS)是一种机制,它允许Web应用程序从不同的源请求资源,比如JavaScript通过Ajax从非同源的服务器获取数据。在默认情况下,由于浏览器的同源策略限制,这种跨域请求会被阻止。CORS通过设置特定的...
CORS(Cross-Origin Resource Sharing,跨域资源共享)是一种机制,它允许 Web 应用服务器进行跨域资源共享。 在本文中,我们将介绍两种设置 CORS 跨域请求的方式。 方式一:使用 CorsFilter 第一种方式是使用 ...
在Web开发中,跨域资源共享(Cross-Origin Resource Sharing, CORS)是一个重要的概念,它允许一个域(域名、协议或端口)的前端代码访问另一个域的资源。在ThinkPHP 5.1框架中,正确配置跨域支持对于前后端分离的...
CORS是跨域资源共享的一种机制,允许浏览器在发送请求到不同源的服务器时,通过特定的HTTP头部来安全地进行。在Spring Boot中,可以通过添加`@CrossOrigin`注解到控制器方法或者全局配置,来允许特定来源的跨域请求...
跨域配置是指在不同的源之间共享资源时,如何配置服务器以允许跨域请求。SpringCloud Gateway 提供了强大的跨域配置功能,通过配置可以实现跨域请求的控制。 首先,让我们了解什么是跨域请求。跨域请求是指从一个...
**CORS(Cross-Origin Resource Sharing)跨域资源共享**是一种机制,它使用额外的HTTP头部来告诉浏览器允许一个页面从不同的源加载资源。在Web应用程序中,由于同源策略的限制,浏览器不允许JavaScript从不同的域名...
目录本指南将引导您完成使用Spring创建“ Hello,World” RESTful Web服务的过程,该服务在响应中包括跨域资源共享(CORS)的标头。 您可以在此找到有关Spring CORS支持的更多信息。你会建立什么您将构建一个服务,...
JavaScript是Web开发中不可或缺的一部分,尤其在跨域通信方面,CORS(Cross-Origin Resource Sharing,跨源资源共享)和JSONP(JSON with Padding)是两种常见的解决方案。本文将深入探讨这两种技术,以及它们如何...
服务器端必须允许跨域资源共享(CORS),通过设置适当的HTTP头部来允许跨域请求。例如,在PHP中,可以通过header函数发送Access-Control-Allow-Origin头部来允许来自指定域名的跨域请求。 开发者可能会遇到的一个...
访问网站:https://devratroom.blogspot.com/p/cross-domain-cors-extension.html 交叉域将帮助您处理跨域 - 跨起源资源共享(CORS)问题。 这是一个小型工具将有助于与跨域问题面对的Web开发人员和相关域。 列表:...
CORS(Cross-Origin Resource Sharing,跨源资源共享)是Web浏览器为保护用户数据而实施的一种安全策略,限制了脚本从不同源获取资源的能力。当一个请求的源与目标资源的域、协议或端口不同时,浏览器会执行CORS检查...
CORS(Cross-Origin Resource Sharing)是浏览器的一项安全策略,限制了不同源的网站之间共享资源。当在本地文件系统直接打开HTML文件时,由于没有服务器环境,浏览器会默认开启同源策略,导致跨域请求失败,因此...