后端 -> 解决前后端分离项目跨域问题

问题产生原因

由于浏览器的同源策略，在前端请求后端接口时候要遵循同源策略，保证协议、域名、端口三者一致，否则会被浏览器拦截。

解决方案

方法一

在后端请求方法上添加@CrossOrigin注解
在Spring Boot中，可以使用@CrossOrigin注解来解决跨域问题。

@RestController
@RequestMapping("test")
public class TestController {

    @CrossOrigin
    @RequestMapping("test")
    public String test() {
        return "test";
    }
}

方法二

在后端配置文件里添加CorsFilter
在Spring Boot中，可以使用CorsFilter来解决跨域问题。

@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        config.addAllowedOrigin("*");       // 允许跨域请求的源
        config.addAllowedHeader("*");       // 允许跨域请求的头
        config.addAllowedMethod("*");       // 允许跨域请求的方法
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();         // 允许跨域请求的路径
        source.registerCorsConfiguration("/**", config);        // 允许跨域请求的路径
        return new CorsFilter(source);        // 跨域过滤器
    }
}

方法三

使用WebMvcConfigurer
在Spring Boot中，可以使用WebMvcConfigurer来解决跨域问题。

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")        // 允许跨域请求的路径
               .allowedOrigins("*")       // 允许的请求源
               .allowedMethods("*")       // 允许的请求方法
               .allowedHeaders("*")       // 允许的请求头
               .allowCredentials(true);   // 允许携带cookie
               .maxAge(3600);             // 单位为秒
    }
}