前后端分离跨域问题

Access to XMLHttpRequest at ‘http://localhost:8181/list’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

跨域问题是浏览器的一种保护机制，前端发送请求，后端可以返回结果，但是被浏览器给拦截了，导致无法读取结果导致报错。

这是因为浏览器的同源策略。同源策略是浏览器中的一个重要的安全策略，是为了限制不同源之间的交互，从而避免浏览器层面的攻击。

同源是指协议，域名，端口三者都相同。

CORS：Cross Origin Resource Sharing

Spring Boot 项目中解决跨域的 3 种方案
1、在目标方法上添加 @CrossOrigin 注解

@GetMapping("/list")
@CrossOrigin
public List list(){
    List list = Arrays.asList("Java","C++","Go");
    return list;
}

2、添加 CORS 过滤器

@Configuration
public class CorsConfig {
    
    @Bean
    public CorsFilter corsFilter(){
        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 CorsConfiguration implements WebMvcConfigurer {

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