[跨域] 前后端分离项目，解决跨域问题

墨蓝 2023-06-27 05:48 3阅读 0赞

前言：  
现在开发网站，基本都是前后端分离进行开发，省了很多问题，但是前后端开发会遇到跨域问题，要如何解决这个问题呢，下面我们就来讲一讲。

### 什么是前后端分离 ###

在我们开发网站时，传统做法里，servlet、sringMVC、struts，tomcat都会在后台运行java代码，然后再后台生成html代码，接着通过http协议把HTML代码传输到浏览器。这样的做法存在的问题是：

*  再后台运行的时候，如果要连接很多数据库才能把需要的数据查询出来，那么这个html的过程就会比较缓慢，同时生成的html也相对较大，用户就有可能感受比较慢。
 *  前后端开发的联调耦合度也很高，有时候必须互相等待，这样双方的开发效率都降低了。  
    如果采用前后端分离呢，html页面的内容就可以简单看成包含数据部分和不包含数据部分。所以先准备一个不包含数据的html，把他传给浏览器，这个速度本身会非常快的，因为没有最占时间的数据库操作部分。然后再通过Ajax技术，仅仅从服务器获取"纯数据"，然后把纯数据显示在html上。  
    这样做的好处：
 *  即便是后台数据库比较花时间，但是用户体验也比前面的方式好，因为用户会先看到部分页面，过一小会儿再看到数据，比在空白页面打圈圈等待体验好。
 *  后端只提供数据，所以前后端开发耦合度降低了很多，整体开发效率可以得到较大提高。

### 什么是跨域问题 ###

CORS全称Cross-Origin Resource Sharing，意为跨域资源共享。当一个资源去访问另一个不同域名或者同域名不同端口的资源时，就会发出跨域请求。如果此时另一个资源不允许其进行跨域资源访问，那么访问的那个资源就会遇到跨域问题。

### 解决办法 ###

#### 1. 覆盖默认的CorsFilter来解决该问题 ####

import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.cors.CorsConfiguration;
    import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
    import org.springframework.web.filter.CorsFilter;
    /** * 全局跨域配置 / @Configuration public class GlobalCorsConfig { /** * 允许跨域调用的过滤器 */
        @Bean
        public CorsFilter corsFilter() { 
            CorsConfiguration config = new CorsConfiguration();
            //允许所有域名进行跨域调用
            config.addAllowedOrigin("*");
            //允许跨越发送cookie
            config.setAllowCredentials(true);
            //放行全部原始头信息
            config.addAllowedHeader("*");
            //允许所有请求方法跨域调用
            config.addAllowedMethod("*");
            UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
            source.registerCorsConfiguration("/**", config);
            return new CorsFilter(source);
        }
    }

如果项目中应用了SpringSecurity，对OPTIONS请求并没有放开登陆认证。  
在跨域请求中我们需要进行一次OPTIONS请求进行预检。

#### 2. 设置SpringSecurity允许OPTIONS请求访问 ####

在SecurityConfig类的configure(HttpSecurity httpSecurity)方法中添加如下代码。

.antMatchers(HttpMethod.OPTIONS)//跨域请求会先进行一次options请求
    .permitAll()

总结： 此时已完美解决跨域问题，希望对你们有用。我会把我遇到的问题发到这里进行总结，最近也在搭建自己的博客，后期会整理到自己的博客上面。