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

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

什么是前后端分离

在我们开发网站时，传统做法里，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()

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

来源：CSDN

作者：天道酬勤--松

链接：https://blog.csdn.net/qq_39397165/article/details/103826940

标签

前后端分离

config