如何优雅的解决前后端跨域问题

Hello，大叫好，我是Steafan，今天为大家带来在前后端分离开发模式中经常出现的跨域问题，小伙伴们搬好板凳，准备开始吧！

    自从项目开发模式从传统的耦合模式（All-In-One）过渡到目前流行的前后端分离模式，在这之前产生了很多问题，其中最具代表性的要数跨域问题-Accross Original Error。提到跨域问题，总会使人头痛，我到底该怎么解决跨域问题才是最合适的呢？下面，我将根据我从事工作的经验，来为大家详细介绍。

   一、跨域问题的产生

          我们要解决一个问题，首先应该做的不是到处寻找解决方案，而是思考这种问题出现的原因，当把原因分析透彻之后，解决方案也就自然浮现在眼前了。跨域问题其实不是一个新问题，而是自J2EE诞生之日起就已经存在了，只不过前后端分离开发项目的这种方式让跨域问题暴露的更清楚了而已。出于对网络资源访问安全的角度考虑，默认情况下我们只能访问统一域下的所有网络资源，即同一IP地址下的所有网络资源之间可以互相访问，只要不是位于同一IP地址下的网络资源，当我们进行访问时，就会出现跨域拦截，导致不同IP地址之间的网络资源不能互相访问，从而也对我们项目的开发造成了强烈的影响，因为我们的前后端资源都是部署在不同的服务器上面的，这是出于对性能和安全的角度来考虑的。

二、跨域问题的解决

      1、传统的前端解决方式

           通常，当出现跨域问题时，往往都是在前端设置Ajax在请求后端资源时，dataType设为JSONP的方式来解决跨域问题，这是因为浏览器默认的解决方式就是该方案。这种解决方案也是最简单的解决方案，但是这种解决方法有很大的局限性和安全问题。首先，JSONP这种方式只能访问GET请求，即如果项目中使用这种方式来解决跨域，那么久必须要求后端所有的接口请求类型均为GET请求，我们都知道GET请求和POST请求最明显的区别就在于数据安全问题上，一个暴露请求数据，一个不会暴露请求数据，这样一来，客户请求的所有数据都会暴露出来，无形之间就产生了项目中的数据安全问题，然而，这一数据安全问题也是最致命的，所以，笔者不推荐使用这种方式进行跨域问题的解决。

     2、经过演变后的后端解决方式

           鉴于上述第一种情况中出现的数据安全问题，衍生出了后端解决的方式，这就涉及到跨域的本质问题了。

           跨域问题的本质实际上就是不同IP地址间在进行网络资源互相访问时发生的资源限制访问的问题，如下图1，图2所示：

                   

                                                       图1 不存在跨域限制的资源请求和响应流程图

                        

                                                       图2 存在跨域限制的资源请求和响应流程图

          通过上述流程图的比较，可以很清楚的看到，跨域问题的本质其实是前端可以正常向后端发送资源请求，但是在后端将响应后的数据资源返回给前端时，被浏览器的安全策略给拦截了，不予将该响应资源返回给前端，因为他们没有在同一IP地址域中。

        说白了，跨域问题其实就是对请求进行拦截，那么我们需要做的就是在后端将请求放开，即允许请求来请求我们的后端资源并给予返回，主要解决方式是在后端配置FIlter过滤器来实现请求的放开，主要实现代码如下：

public class WebMvcConfig extends WebMvcConfigurerAdapter {

    @Override

    public void addCorsMappings(CorsRegistry registry) {

        registry.addMapping("/**")

                .allowedOrigins("*")

                .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")

                .maxAge(3600)

                .allowCredentials(true);

    }

}

    自己新加一个跨域配置类并继承WebMvcConfigurerAdapter类，重写其中的addCorsMappings方法，并根据项目的具体业务场景来设置registry的请求属性，使之能够接受跨域而来的网络请求，该方法就是放开请求的主要方法，我们只需要修改这个方法就可以了。当然，后端解决跨域的方式有很多种，这里只是选择一种来进行详细介绍，这种方式也是我在工作中用到的最多的解决方式，同时也兼容各类业务场景。

    以上就是我对跨域问题的总结和归纳，希望能够帮到正在为如何解决跨域问题而苦恼的你。

    最后，感谢各位朋友的关注，有不懂的地方欢迎留言，我会及时解决，感谢各位的反馈！！！！