[Lehgo] Spring CORS 오류 해결 방법

💻 실습 환경

OS: AWS Linux

 

💬 요구 사항

cors 에러는 보안 상의 이유로, 브라우저에서 교차 출러의 HTTP 요청을 제한하기 때문에 일어나는 에러이다. 외부 API를 사용하는 웹 어플리케이션은 보안상의 이유 때문에 자신의 출처와 동일한 리소스만 불러올 수 있으며, 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 cors 헤더를 포함한 응답을 반환해줘야 한다.

위와 같은 이유로 spring 서버와 vue 서버의 통신에서 cors 오류가 생겨 spring에서 cors를 허용해주도록 코드를 수정해줘야한다. 이를 해결하기 위해 구글링했을 때, 크게 3가지 방법을 사용할 수 있는 걸 알게 됐다.

1. main 메서드에서 cors 허용하기
2. webConfig.java 파일을 새로 만들어서 웹 설정 해주기
3. Spring Security 설정 수정하기 (채택)

위 1, 2 방법이 잘 통하지 않았고, 우리 프로젝트는 spring security를 이용해서 3번 방법으로 cors 오류를 해결할 수 있었다.

 

📌 SpringSecurity 설정 변경

Security 설정 파일에 cors 설정을 적용해주자.

(1)  cors preflight 설정 : Preflight request에 대해, 인증을 하지 않고 모든 요청을 허용한다.

(2) cors().정책 설정

import org.springframework.web.cors.CorsUtils;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.CorsConfigurationSource;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;

@Override 
protected void configure(HttpSecurity http) throws Exception { 
    http
    .csrf().disable()
    .httpBasic().disable()
    .authorizeRequests()
    <!-- (1) preflight -->
    .requestMatchers(CorsUtils::isPreFlightRequest).permitAll() 
    .antMatchers("/login").permitAll()
    .antMatchers("/exists/**").permitAll() //중복 여부 검사
    .antMatchers("/checkUser").hasRole("USER")
    .antMatchers("/admin/**").hasRole("ADMIN")
    .anyRequest().permitAll()
    .and() 
    .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS)
    .and() 
    .formLogin()
    .disable()
    <!-- (2) cors 설정 적용 -->
    .cors().and(); 

    http.addFilterBefore(new JwtAuthenticationFilter(jwtTokenProvider), UsernamePasswordAuthenticationFilter.class);
}

 

📌 CorsConfigurationSource 메서드 추가

Security 설정 파일에 CorsConfigurationSource 메서드를 추가해주자.

• configuration.addAllowedOriginPattern("*");
  
  • 특정 패턴의 origin으로 부터 오는 것만 허용한다.
• configuration.addAllowedMethod("*");
  • 특정 메소드만 허용한다.
• configuration.addAllowedHeader("*");
  • 특정 헤더만 허용한다.
• configuration.addExposedHeader("authorization");
  • 추가 헤더, 커스텀 헤더를 지정한다.
  • jwtToken을 이용해 사용자 인증을 하기 위해 'authorization'이라는 커스텀 헤더가 필요하다.
• source.registerCorsConfiguration("/**", configuration);
  • corsConfiguration 등록

 

// CORS 허용 적용
@Bean
public CorsConfigurationSource corsConfigurationSource() {
    CorsConfiguration configuration = new CorsConfiguration();
    configuration.addAllowedOriginPattern("*");
    configuration.addAllowedMethod("*");
    configuration.addAllowedHeader("*");
    configuration.addExposedHeader("authorization");
    configuration.setAllowCredentials(true);
    configuration.setMaxAge(3600L);
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", configuration);
    return source;
}