文档章节

Spring MVC通过CROS协议解决跨域问题

vstaryw
 vstaryw
发布于 2016/07/18 14:22
字数 1480
阅读 117
收藏 12
点赞 0
评论 0

现在接手学校网络中心的一个项目,根据团队成员的实际情况以及开发需要,老师希望做到前后端完全分离。后台使用java提供restful API 作为核心,前台无论PC或者移动端可以共用一个核心。前期解决了哦oauth2,作为授权机制等问题,本以为大业将成。(最近打算详细介绍一下机遇Spring sercurity 实现oauth2的解决方案)结果又出现了一个跨域问题,让我们踩了一个大坑,记录在此,以绝后患。 错误信息如下: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 403. 什么是跨域 简单的说即为浏览器限制访问A站点下的js代码对B站点下的url进行ajax请求。比如说,前端域名是www.abc.com,那么在当前环境中运行的js代码,出于安全考虑,访问www.xyz.com域名下的资源,是受到限制的。现代浏览器默认都会基于安全原因而阻止跨域的ajax请求,这是现代浏览器中必备的功能,但是往往给开发带来不便。特别是对我这样后台开发人员来讲,这个事情简直神奇。 但跨域的需求却一直都在,为了跨域,勤劳勇敢的程序猿们想出了许许多多的方法,例如,jsonP、代理文件等等。但这些做法增加了许多不必要的维护成本,而且应用场景也有许多限制,例如jsonP并非XHR,所以jsonP只能使用GET传递参数。更详细的资料可以看这里 Web应用跨域访问解决方案汇总 CORS协议 如今的JS大有一统天下的趋势,浏览器已经成了大多应用最好的安身之所。哪怕在移动端也有各种Hybird方案,在本地文件系统的Web页面,也有需要获取外部数据的需求,而这些需求也必然是跨域的。在寻找跨域解决方案时,发现了最优雅解决方案就是HTML5来带了的“Cross-Origin Resource Sharing”的新特性,来赋予开发者权力决定资源是否允许被跨域访问。 CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。 它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。 为什么说它优雅呢? 整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。 因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。 解决这个问题的关键就落在了我这个负责后台的程序猿身上。 看看文档也不是什么难事嘛,就是需要在http头中设置Access-Control-Allow-Origin来决定需要允许哪些站点来访问。关于CROS协议更详细内容参考跨域资源共享 CORS 详解 CROS常见header CORS具有以下常见的header Access-Control-Allow-Origin: http://kbiao.me Access-Control-Max-Age: 3628800 Access-Control-Allow-Methods: GET,PUT, DELETE Access-Control-Allow-Headers: content-type "Access-Control-Allow-Origin"表明它允许" http://kbiao.me "发起跨域请求 "Access-Control-Max-Age"表明在3628800秒内,不需要再发送预检验请求,可以缓存该结果(上面的资料上我们知道CROS协议中,一个AJAX请求被分成了第一步的OPTION预检测请求和正式请求) "Access-Control-Allow-Methods"表明它允许GET、PUT、DELETE的外域请求 "Access-Control-Allow-Headers"表明它允许跨域请求包含content-type头 当然在处理这个问题的时候前端也有不少坑,特别是Chrome浏览器不允许localhost的跨域请求,详细方案见我项目中负责前端解决方案的小伙伴。假装有链接 常规解决方案 知道了问题的原因,也知道了配套的解决办法,现在就让我们来实现解决。思路很简单,当前端要请求跨域资源时候,我们给它加上响应的响应头即可。很显然我们自己定义一个过滤器是最简单不过了。 /** * Created by kangb on 2016/5/10. */ @Component public class myCORSFilter implements Filter { @Override public void init(FilterConfig filterConfig) throws ServletException { } @Override public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException { HttpServletResponse response = (HttpServletResponse) servletResponse; String origin = (String) servletRequest.getRemoteHost()+":"+servletRequest.getRemotePort(); response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE"); response.setHeader("Access-Control-Max-Age", "3600"); response.setHeader("Access-Control-Allow-Headers", "x-requested-with,Authorization"); response.setHeader("Access-Control-Allow-Credentials","true"); filterChain.doFilter(servletRequest, servletResponse); } @Override public void destroy() { } } @Component 是Spring的注解,关键部分在doFilter中,添加了我们需要的头,option是预检测需要所以需要允许,Authorization是做了oauth2登录响应所必须的,Access-Control-Allow-Credentials表示允许cookies。都是根据自己项目的实际需要配置。 再配置Web.xml使得过滤器生效 cors ·CLASS_PATH·.myeCORSFilter cors /api/* 接下来前端就可以像往常一样使用AJAX请求获得资源了,完全不需要做出什么改变。 SPRING 4中更优雅的办法 SpringMVC4提供了非常方便的实现跨域的方法。在requestMapping中使用注解。 @CrossOrigin(origins = “http://kbiao.me”) 全局实现 .定义类继承WebMvcConfigurerAdapter,设置跨域相关的配置 public class CorsConfigurerAdapter extends WebMvcConfigurerAdapter{ @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/api/*").allowedOrigins("*"); } } 将该类注入到容器中: 更详细的内容参考Spring 官方的hello world案例Enabling Cross Origin Requests for a RESTful Web Service http://spring.io/guides/gs/rest-service-cors/或者使用git下载示例源码 https://github.com/spring-guides/gs-rest-service-cors.git
 

本文转载自:http://www.imooc.com/article/7719

共有 人打赏支持
vstaryw
粉丝 1
博文 18
码字总数 11727
作品 0
深圳
程序员
Spring 跨域支持(CROS)注解:@CrossOrigin

Spring MVC 4.2 增加 CORS 支持 跨站 HTTP 请求(Cross-site HTTP request)是指发起请求的资源所在域不同于该请求所指向资源所在的域的 HTTP 请求。比如说,域名A(http://domaina.example)的某...

孟飞阳
2017/11/08
0
0
Spring跨域问题

spingMVC 3.X跨域 关于跨域问题,主要用的比较多的是cros跨域。 详细介绍请看https://developer.mozilla.org/zh-CN/docs/Web/HTTP/AccesscontrolCORS 但是,在springmvc+angularjs下支持跨域...

刘引惟
2016/11/17
26
0
spring mvc+Ajax跨域请求-CORS方式

关于跨域问题,主要用的比较多的是cros跨域和JSONP跨域,JSONP跨域我已经在另外一篇博客中写了,这里主要说的是CORS方式的跨域。 CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin re...

别寒
2016/11/02
174
0
SpringMvc解决跨域问题

前言:今天解决js跨域,搞了一下午,呜呜,以下是我整理的一些解决方法 介绍: 跨站 HTTP 请求(Cross-site HTTP request)是指发起请求的资源所在域不同于该请求所指向资源所在的域的 HTTP 请...

王念博客
2016/06/08
13.9K
0
SpringBoot +spring security 与CSRF有关的几个 问题

1、问题 开启 csrf 后 列表页面没有数据 页面console.log(403) 2、科普 首先,科普一下,什么是"CSRF"? 这是一个web应用安全的问题,CSRF(Cross-site request forgery)跨站请求伪造,也被称...

douruanliang
05/15
0
0
Spring MVC 4.2 增加 CORS 支持

标签: spring mvc / cors / 跨越资源共享 30238 Spring MVC 4.2 增加 CORS 支持 跨站 HTTP 请求(Cross-site HTTP request)是指发起请求的资源所在域不同于该请求所指向资源所在的域的 HTTP...

费氏家族
2017/11/01
0
0
搞定所有的跨域请求问题 : jsonp & CORS

原文出处:JavaDoop 网上各种跨域教程,各种实践,各种问答,除了简单的 jsonp 以外,很多说 CORS 的都是行不通的,老是缺那么一两个关键的配置。本文只想解决问题,所有的代码经过亲自实践。...

JavaDoop
2017/11/30
0
0
Ajax+Spring MVC实现跨域请求(JSONP)

JSONP解释 在解释JSONP之前,我们需要了解下”同源策略“这个概念,这对理解跨域有帮助。基于安全的原因,浏览器是存在同源策略机制的,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源...

熊大熊二
2015/09/18
416
2
CORS with Spring Boot and Spring Security

Spring 对 CORS 的支持 在这篇文章 spring 说明了自己在 Spring MVC 中所提供的 CORS 的支持。文中提到了三种 Spring 支持 CORS 的方式: 对于单个方法的跨域支持,可以使用 的注解实现,这种...

eisenxu
2017/11/08
0
0
前后端分离-从MVC到前后端分离

摘要:MVC模式早在上个世纪70年代就诞生了,直到今天它依然存在,可见生命力相当之强。MVC模式最早用于Smalltalk语言中,最后在其它许多开发语言中都得到了很好的应用,例如,Java中的Strut...

郭恩洲_OSC博客
2016/11/21
32
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

istio源码分析之pilot-discovery模块分析

本文分析的istio代码版本为0.8.0,commit为0cd8d67,commit时间为2018年6月18日。 本文为Service Mesh深度学习系列之一: Service Mesh深度学习系列part1—istio源码分析之pilot-agent模块分...

xiaomin0322
9分钟前
0
0
数据库基本操作:增删改查及联表操作

所用软件:SQL Server Management Studio 首先第一步,建立一个表。在这里命名为T1。并在里面填入几条数据。如图: T1 一.查询 查询所有:select * from T1; 按条件查询:select * from T1 ...

小_橙_子
13分钟前
0
0
Crontab作业时间设置

今天,遇到这么一个题目,周一到周五的9:00-16:59之间,每隔两分钟将某个命令运行一次。给的答案是: */2 9-16 * * 1-5 /usr/sbin/somecommand dosomething 乍一看,这个答案不对,应...

大别阿郎
18分钟前
0
0
ES17-JAVA API文档管理

1.保存文档 可以通过json工具把java对象转换成json字符串进行保存,也可以通过内置的帮助类直接构建json格式 /** * 获取客户端 * * @return */public static TransportClie...

贾峰uk
18分钟前
0
0
Python代码规范和命名规范

前言 Python 学习之旅,先来看看 Python 的代码规范,让自己先有个意识,而且在往后的学习中慢慢养成习惯 一、简明概述 1、编码 如无特殊情况, 文件一律使用 UTF-8 编码 如无特殊情况, 文件头...

blackfoxya
21分钟前
0
0
联动滑动之一:NestScrollChild和NestedScrollingParent

NestScrollChild和NestedScrollingParent 吐槽一下开源中国竟然标题字数有限制 由于项目中使用了CoordinateLayout来解决联动以及实现炫酷的UI效果,那么必须就要研究一波源码了,毕竟知其然知...

JerryLin123
38分钟前
1
0
cloudera spark2.2 读写hbase

cloudera spark2.2 读写hbase 例子 host = 'bigdata-03,bigdata-05,bigdata-04'conf = { "hbase.zookeeper.quorum": host, "hbase.mapreduce.inputtable": "student1"}k......

osenlin
43分钟前
0
0
数据库规范化

转载自 一个小时学会MySQL数据库 地址:http://www.cnblogs.com/best/p/6517755.html 截取其中 1.4 部分 用于自己学习使用 感谢作者:张果 1.4、数据库规范化 经过一系列的步骤,我们现在终于...

十万猛虎下画山
44分钟前
0
0
ios逆向之工具篇

Reveal:查看任意app的UI结构 注:1.不越狱的手机,可以用Reveal来查看自己app的UI结构,不能查看其它app的结构。 2.越狱手机上可以查看任意app的UI结构。 IDA:反编译工具 从App Store下载的...

HeroHY
44分钟前
0
0
EOS区块链平台智能合约示例HelloWorld

我们将介绍一个使用EOS智能合约构建hello World的例子。 一般环境设置通过上一篇文章已经说明,这方面的问题大家可以看本博客上一篇文章,本文引用了官方EOS在Git上的示例。 运行nodeos 要通...

笔阁
46分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部