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请求提供安全机制。
相关推荐
chrome跨域插件CORS离线下载,解压后有两个压缩包,直接把B压缩包拖放到chrome插件管理页面即可。或者解压A压缩包得到一个crx文件和一个zip文件,把这两个中的任一个拖放到插件管理页面即可。
javascript-cros 跨域的一些问题和方法总结 一直都说想找个大总结的文章关于跨域的处理奈何度娘上的资料太老旧,自己对于新的知识点又不是十分十分有研究。因此一直让懒癌发作下去。奈何最近做了双失青年,因此有了...
Cross Domain will help you to deal with cross domain - CORS problem. This is tool helpful when face with cross domain issue.
layui-table-cros:layui表格跨域请求
前端跨域解决方案,jsonp和cros两种解决方式。我们发现,Web页面上调用js文件时不受是否跨域的影响,凡是拥有"src"这个属性的标签都拥有跨域的能力,比如[removed]、、<iframe>。那就是说如果要跨域访问数据,...
主要介绍了快速解决跨域请求问题:jsonp和CORS,涉及jsonp和CORS的介绍,分享了前端 jQuery 写法,后端 SpringMVC 配置,后端非 SpringMVC 配置等相关内容,具有一定借鉴价值,需要的朋友可以参考下。
(2) CROS:跨域资源共享 以下为CROS解决方案: a.在WebService接口加上响应头信息: b.在web.config文件中加上相关配置节信息: 运用a或者b的解决方案后,浏览器头信息中变动如下: 最终问题得以较好的解决,...
跨域插件,备用下,好不容易找到,有个太贵了,一个积分意思意思,H5开发必备的chrome插件
主要介绍了使用Spring CROS解决项目中的跨域问题详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
Spring,跨域 ,解决方案,官方, demo,cros
通过呆着读者手写速成版本的websocket入门案例,以项目案例的方式带你...4.前后端分离项目的Cros跨域问题解决 阅读建议: 此资源以案例代入知识点的方式,让你快速上手websocket的相关学习,可针对项目本身向外扩展。
cors解决前端跨域问题配置和jar
springboot解决跨域有cros,配置就是那几项。 如果把服务端程序部署在nginx上,在nginx 也可以解决,服务端和nginx只用写一个即可, server { listen 3002; server_name localhost; location /ok { proxy_pass ...
google chrome 安装 CORS插件可直接本地ajax调式远程服务解口,解决跨域问题。
vue-springboot-cros_jsonp:前初步跨域,cors,jsonp(新版springmvc)实现
Express 4.x 使用CORS跨域的详细解析
浏览器安全防止web页面发出AJAX请求到另一个领域。这种限制称为同源策略,这是为了防止...CROS,服务器可以允许一些跨域源而拒绝其他域的请求。CORS比之前JSONP等技术更安全、更灵活。本教程展示了如何在Web API的应用程
cros-源码.rar
cros核心测试CROS核心测试用例参见: :
今天小编就为大家分享一篇基于axios 解决跨域cookie丢失的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧