프론트엔드와 협업을 위해서는 cors 설정이 필요하다.
- 허용 도메인과 엔드포인트를 열어준다. YML으로 관리
cors: origin: - http://localhost:3000 // 프론트 로컬 서버 - http://127.0.0.1:3000 - https://monthsub.netlify.app // 프론트 배포 서버 allows: //엔드포인트 get: - /assets/** - /h2-console/** - /v3/api-docs/** - /swagger-monthsub.html - /swagger-ui/** # endpoint - /health - /main - /series - /series/sort - /series/{id} - /series/search/title - /series/search/nickname - /users/{id}/other post: - /users/login - /users/signup
- SecurityConfig에 적용시킨다.
@Override protected void configure(HttpSecurity http) throws Exception { http.authorizeRequests() .mvcMatchers(HttpMethod.GET, this.security.getAllows().getGet().toArray(String[]::new)) .permitAll() .mvcMatchers(HttpMethod.POST, this.security.getAllows().getPost().toArray(String[]::new)) .permitAll() .anyRequest().fullyAuthenticated() .and() .cors().configurationSource(corsConfigurationSource()) // cors 설정 .and() ... 생략 }
- Security CORS 설정을 해준다.
@Bean public CorsConfigurationSource corsConfigurationSource() { CorsConfiguration configuration = new CorsConfiguration(); Arrays.stream(this.security.getCors().getOrigin()) .toList() .forEach(configuration::addAllowedOrigin); configuration.addAllowedHeader("*"); configuration.addAllowedMethod("*"); configuration.setAllowCredentials(true); UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration("/**", configuration); return source; }
- Web CORS 설정을 해준다.
@Configuration public class WebConfig implements WebMvcConfigurer { private final Security security; public WebConfig(Security security) { this.security = security; } @Override public void addCorsMappings(CorsRegistry registry) { registry .addMapping("/**") .allowedOrigins(this.security.getCors().getOrigin()) .allowedMethods("*"); } }