vue前后端分离项目SpringSecurity跨域问题解决方案

最新推荐文章于 2025-09-13 04:45:05 发布

原创最新推荐文章于 2025-09-13 04:45:05 发布 · 4.9k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#跨域 #SpringSecurity

前后端分离专栏收录该内容

1 篇文章

订阅专栏

未解决跨域问题时访问后台出现如下错误：

No 'Access-Control-Allow-Origin' header is present on the requested resource...

enter image description here

解决步骤如下：

1. 在WebSecurityConfig配置中开启跨域支持，部分代码如下：

//开启跨域
.cors()
.and()
.csrf()
.disable()
.authorizeRequests()
//处理跨域请求中的Preflight请求
.requestMatchers( CorsUtils::isPreFlightRequest ).permitAll()

2.在需要跨域的Controller层上加上注解@CrossOrigin，如：

@CrossOrigin
@RestController
public class LoginController extends BaseController {
    ...
}

虽然解决了需要跨域的Controller问题，但是像springsecurity的/login默认登录方法，还是无法解决跨域问题，需要进行以下配置

3.自定义CorsConfig类，彻底解决跨域问题

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

@Bean
public CorsFilter corsFilter() {
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", buildConfig());
    return new CorsFilter(source);
}

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

加上这段配置后，需要跨域的Controller不需要加@CrossOrigin注解也可实现跨域，跨域问题完美解决！

访问我的达人课

访问我的博客 Wang's Blog