java 浅析跨域问题以及如何使用Cors解决前后端分离部署项目所遇到的跨域问题

最新推荐文章于 2024-03-18 17:44:23 发布

beyondLi71

最新推荐文章于 2024-03-18 17:44:23 发布

阅读量5.7k

点赞数 2

分类专栏： java springboot 文章标签：跨域 cors java 前后端分离部署

本文链接：https://blog.csdn.net/liboyang71/article/details/77867239

版权

springboot 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

java

16 篇文章 2 订阅

订阅专栏

随着时间的推移，前后端分离的开发形式越来越流行，使用的公司也越来越多。但是这种开发形式也会带来一个问题。那就是跨域问题。

什么是跨域

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对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>

如果我们不做任何跨域处理访问的话，会报如下错误，大概意思也就是说我们没有配置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() {}
}

方法二(使用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;
    }

}

此时我们再进行访问，效果如下，跨域问题完美解决。

写这篇文章的目的主要是因为现在前后端分离越来越多，跨域问题碰到的概率越来越高，所以写出这篇文章，希望可以帮助到有需要的同学。

beyondLi71

关注

2
点赞
踩
19

收藏

觉得还不错? 一键收藏
1
评论
java 浅析跨域问题以及如何使用Cors解决前后端分离部署项目所遇到的跨域问题

随着时间的推移，前后端分离的开发形式越来越流行，使用的公司也越来越多。但是这种开发形式也会带来一个问题。那就是跨域问题。什么是跨域跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。什么情况下不是跨域？即：满足域名、协议、端口均相同的即不是跨域。例如 http://www.beyon
复制链接

扫一扫