java 浅析跨域问题以及如何使用Cors解决前后端分离部署项目所遇到的跨域问题
2017-09-26 11:13
1246 查看
什么是跨域
跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制。 什么情况下不是跨域?
即:满足域名、协议、端口均相同的即不是跨域。
例如
http://www.beyondLi.com/index.html 调用 http://www.beyondLi.com/server (非跨域)
http://www.beyondLione.com/index.html 调用 http://www.beyondLitwo.com/server(主域名不同:one/two,跨域)
http://www.beyondLi.com:8080/index.html 调用 http://www.beyondLi.com:8081/server (端口不同:8080/8081,跨域)
http://www.beyondLi.com/index.html 调用 https://www.beyondLi.com/server (协议不同:http/https,跨域)
场景
现在我们进行前后端分离的部署,将前端的代码与后端的代码放到不同的服务器上,此时前端要使用ajax请求来调用后台的接口获取到对应的数据。
解决方案
一般解决跨域问题的方案有两种,jsonp以及cors。因为jsonp需要前后台做配合统一标示个人感觉比较麻烦,所以本人选择使用cors方案来解决此问题。
cors介绍
Cross-Origin Resource Sharing (CORS) 是W3c工作草案,它定义了在跨域访问资源时浏览器和服务器之间如何通信。CORS背后的基本思想是使用自定义的HTTP头部允许浏览器和服务器相互了解对方,从而决定请求或响应成功与否。
cors与jsonp对比
CORS与JSONP相比,更为先进、方便和可靠。 1、 JSONP只能实现GET请求,而CORS支持所有类型的HTTP请求。
2、 使用CORS,开发者可以使用普通的XMLHttpRequest发起请求和获得数据,比起JSONP有更好的错误处理。
3、 JSONP主要被老的浏览器支持,它们往往不支持CORS,而绝大多数现代浏览器都已经支持了CORS。
对一个简单的请求,没有自定义头部,要么使用GET,要么使用POST,它的主体是text/plain,请求用一个名叫Orgin的额外的头部发送。Origin头部包含请求页面的头部(协议,域名,端口),这样服务器可以很容易的决定它是否应该提供响应。
服务器端对于CORS的支持,主要就是通过设置Access-Control-Allow-Origin来进行的。
Header set Access-Control-Allow-Origin *
为了防止XSS攻击我们的服务器, 我们可以限制域,比如
Access-Control-Allow-Origin: http://beyondLi.com
代码实现
首先经过对上面的阅读我们对跨域以及cors进行了初步的了解。现在我们来思考一个问题。跨域应该前端进行配置还是后端进行配置?答案当然是后端。试想一下,如果这个问题是由前端解决而后台不需要任何配置,那么岂不是你随便写一个ajax就能访问各种网站的各种接口了吗。这就有点恐怖了。所以理所应当的应该我们后台开发来配置这个是否允许跨域请求的开关,并且能做一定的限制和筛选。
前端代码
并没有什么特别,不做过多介绍。只是一个简单的ajax访问后端接口的请求。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello world</title> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript" src="js/jquery-3.1.1/jquery-3.1.1.js"></script> </head> <body> <div id="app"> <p>hello</p> </div> </body> <script> $(function(){ alert("ajax go"); $.ajax({ url:'http://192.168.14.131:8080/student/getInfo', type:'post', dataType:'text', success:function(data){ alert(data); } }); } ) </script> </html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
如果我们不做任何跨域处理访问的话,会报如下错误,大概意思也就是说我们没有配置Access-Control-Allow-Origin这个头。
后台代码
我们的核心代码来了,其实很简单,只要将报错的属性设置到response头部,即可解决此问题,所以我们只要提供一个过滤器或者一个拦截全部的AOP即可解决此问题。代码如下(本人使用的springboot进行开发,只要了解问题的本质,将下面的方法有选择性的使用即可。)方法一(使用Filter)
/** * Created by beyondLi on 2017/7/29. * @desc 解决跨域 */ @Component public class CrossFilter implements Filter { public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException { HttpServletResponse response = (HttpServletResponse) res; //如果要做细的限制,仅限某域名下的可以进行跨域访问到此,可以将*改为对应的域名。 response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader("Access-Control-Allow-Methods", "*"); response.setHeader("Access-Control-Max-Age", "1728000"); response.setHeader("Access-Control-Allow-Credentials", "true"); response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); // response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); chain.doFilter(req, res); } public void init(FilterConfig filterConfig) {} public void destroy() {} }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
方法二(使用AOP)
/** * Created by beyondLi on 2017/7/31. */ //证明是一个配置文件(使用@Component也可以,因为点入后会发现@Configuration还是使用了@Component) @Configuration //证明是一个切面 @Aspect public class ControllerAOP { //环绕aop //execution表达式 此表达式表示扫描controller下所有类的所有方法都执行此aop @Around("execution (* com.beyondli.controller..*.*(..))") public Object testAop(ProceedingJoinPoint pro) throws Throwable { //获取response HttpServletResponse response = ((ServletRequestAttributes) RequestContextHolder.getRequestAttributes()).getResponse(); //核心设置 response.setHeader("Access-Control-Allow-Origin", "*"); //执行调用的方法 Object proceed = pro.proceed(); return proceed; } }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
此时我们再进行访问,效果如下,跨域问题完美解决。
写这篇文章的目的主要是因为现在前后端分离越来越多,跨域问题碰到的概率越来越高,所以写出这篇文章,希望可以帮助到有需要的同学。
相关文章推荐
- vue2 前后端分离项目ajax跨域session问题解决方法
- 使用myeclipse将Java项目打成jar包遇到classnotfound的问题解决办法
- Maven构建部署项目遇到的各种问题以及解决办法
- 前后端分离的项目,如何解决登录问题
- 前后端分离的j2ee的web项目,使用vue方式,即{{}}方式批量传入前端参数,遇到一个一个问题,页面上一开始有{{}},怎么处理?
- 使用STS创建maven项目,以及创建完成后如何解决项目报错问题
- 总结项目中遇到的问题以及如何解决
- vue+Java后端进行调试时如何解决跨域问题
- java使用cors解决跨域问题,服务器端开发为语言为java
- 跨域资源共享CORS以及在zepto中使用遇到的问题
- 如何部署Android开发环境以及解决部署中遇到的问题
- vue前后端分离使用fetch 跨域请求时 session失效问题解决
- 使用myeclipse将Java项目打成jar包遇到classnotfound的问题解决办法
- 解决在java的ssm框架中使用ajax提交数据遇到的跨域问题
- 前后端分离的项目,如何解决登录问题
- vue2 前后端分离项目ajax跨域session问题解决
- java如何发送邮件以及使用Velocity模板解决模板文件中文乱码的问题
- 解决java前后端分离跨域的问题
- java使用cors解决跨域问题
- 解决前后端分离的 CORS 跨域资源共享问题