前后端分离项目如何解决跨域

前后端分离项目如何解决跨域

一、造成跨域原因
同源策略

一种约定 （协议、域名、端口一致即为同源）
同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

VUE：http://localhost:8080
SprngBoot：http://localhost:8081/list
也就是说在资源的请求中（协议、域名、端口）有一个不一致即会产生跨域请求的问题

二、如何解决跨域

1、在目标方法中上@CrossOrigin注解
2、添加Cros过滤器

@Configuration
public class CorsConfig {
   @Bean
   public  CorsFilter corsFilter(){
       //创建Cors配置对象
       CorsConfiguration corsConfiguration = new CorsConfiguration();
       //设置哪些域可以访问
       corsConfiguration.addAllowedOrigin("*");
       //设置哪些请求头可以访问
       corsConfiguration.addAllowedHeader("*");
       //设置哪些方法可以访问
       corsConfiguration.addAllowedMethod("*");
       //创建资源对象
       UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
       //添加配置资源
       source.registerCorsConfiguration("/**",corsConfiguration);
       return new CorsFilter(source);
   }
}

3、实现WebMvcConfigurer接口，重写addCorsMappings方法

@Configuration
public class ConfigurationCors implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("/**")//允许哪些域
                .allowedMethods("GET","POST","PUT","DELETE","HEAD","OPTIONS")//允许哪些方法
                .allowCredentials(true)//是否允许携带cookie
                .maxAge(3600)//询问时间
                .allowedHeaders("*");//请求头
    }
}