前后端分离开发解决跨域

现在除了一些比较老的项目基本都采用的是，前后端分离方式进行开发，但随之而来的就会出现跨域问题。
跨域问题出现的根本原因就是由于浏览器的同源策略。

Spring Boot

前端错误信息：
 Access to XMLHttpRequest at 'http://localhost:8181/list' from origin
'http://localhost:8080' has been blocked by CROS poilcy: No
'Access-Control-Allow-Origin' header is present on the requested
 resource.

这其实是浏览器的一种保护机制，而不是说后端没有接收到请求。但是因为前端浏览器的一些设置，导致报错，响应被拦截了。

同源策略：浏览器的一种安全策略，限制不同源之类的交互。不同源之间的请求无法交互，从而有效避免一些浏览器层面的攻击。 协议，域名，端口
三个都相同就算是同源，就不会产生跨域问题

举个例子（以下的就不是同源，需要跨域）：

Vue : http://localhost:8080
Spring Boot: http://localhost:8081/list

下面介绍三种在后端解决跨域的方法：
1.在请求上加上@CrossOrigin即可

    @PostMapping("wx/auth/logout")
    @CrossOrigin
    public BaseRespVo logout() {
        Subject subject = SecurityUtils.getSubject();
        subject.logout();
        return BaseRespVo.ok();
    }

2.做CorsConfig配置类

@Configuration
public class CorsConfig {
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); 
        corsConfiguration.addAllowedHeader("*"); 
        corsConfiguration.addAllowedMethod("*"); 
        return corsConfiguration;
    }

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        // 对接口配置跨域设置
        source.registerCorsConfiguration("/**", buildConfig()); 
        return new CorsFilter(source);
    }
}

3.添加cos的一个映射

@Configuration
public class CorsConfiguration implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowedMethods("POST", "GET", "PUT", "DELETE", "HEAD", "OPTIONS")
                .maxAge(3600)
                .allowedHeaders("*")
                .allowCredentials(true);
    }
}

当然了，这只是后端解决的方式，前端也可以，通过Nginx代理解决跨域问题也是可以的，想知道的小伙伴在评论区，下期出。