[Spring Boot] CORS Filter 설정하기 (CORS 오류 해결방법) - Java

웹 개발을 하다 보면 CORS 오류는 많이 볼 수밖에 없다.

최근 Spring Boot로 개발을 진행하면서 발생했던

CORS 오류를 어떻게 해결했는지에 대한 과정이다.

 

CORS (Cross Origin Resource Sharing) Policy

직역하자면 출처가 서로 다른 자원들을 공유한다는 뜻으로 브라우저가 리소스 로드를 허용해야 하는 자체 출처 이외의 모든 출처 (도메인, 스키마 또는 포트)를 서버가 표시할 수 있도록 하는 정책.

 

 

Cross-Origin Resource Sharing (CORS) - HTTP | MDN

Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources. CORS also relies on a mechanism by which

developer.mozilla.org

---

1. CORS 오류 발생

프론트엔드, 백엔드 개발자 구분 없이 CORS 관련 오류는 많이 봤을 거란 생각이 든다.

내가 겪었던 CORS policy 오류는 특히나 테스트할 때 많이 발생했던 것 같다.

Access to XMLHttpRequest at 'http://test.co.kr/home' from origin 'http://localhost:8000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. main.dart.js:67750

 

이 놈의 CORS 오류는 브라우저의 출처 동일 정책(SOP - Same Origin Policy) 때문에 생겨났다고 한다.

2. CORS 설정하기

내 경우는 WebConfig에서 addCorsMappings 오버라이딩을 통해 CORS 설정을 했다.

package com.deepit.stock.config;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
 
import com.deepit.stock.filter.JwtAuthorizationFilter;
import com.deepit.stock.jwt.JwtTokenProvider;
 
import lombok.RequiredArgsConstructor;
 
@RequiredArgsConstructor
@Configuration
public class WebConfig implements WebMvcConfigurer {
	
	private final JwtTokenProvider jwtTokenProvider;
	
	@Value("${jwt.filter.enable:false}")
	private boolean jwtFilterEnable;
		
	@Bean
	public FilterRegistrationBean<JwtAuthorizationFilter> jwtAuthorizationfilter() {
		FilterRegistrationBean<JwtAuthorizationFilter> filterBean = new FilterRegistrationBean<>();
		filterBean.setFilter(new JwtAuthorizationFilter(jwtTokenProvider, jwtFilterEnable));
		filterBean.addUrlPatterns("/*");
		filterBean.setOrder(0);
		
		return filterBean;
	}
	
	@Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("*")
                .allowedHeaders("*")
                .allowCredentials(false).maxAge(6000);
    }
	
}

 

그런데....

그래도 CORS 오류가 발생한다....😂

 

정보들을 찾아보니 addCorsMappings메소드는 Spring MVC에서 사용하는 메소드로

 

설정을 자동으로 하는 Spring Boot와는 설정 충돌이 일어날 수 있다고 한다!!!

 

3. CorsFilter 설정하기

CorsFilter를 추가하여 직접 설정을 하면 된다.

CorsFilter를 만들어도 되는데 내 경우는 WebConfig에 설정을 추가했다.

@Bean
public FilterRegistrationBean<CorsFilter> corsFilterRegistrationBean() {
    CorsConfiguration config = new CorsConfiguration();
    config.setAllowCredentials(false);
    config.addAllowedOrigin("*");
    config.addAllowedHeader("*");
    config.addAllowedMethod("*");
    config.setMaxAge(6000L);
 
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", config);
 
    FilterRegistrationBean<CorsFilter> filterBean = new FilterRegistrationBean<>(new CorsFilter(source));
    filterBean.setOrder(0);
 
    return filterBean;
}

 

만약 여러 필터를 사용 중이라면 CorsFilter의 순서를 가장 빠르게 하면 된다.

 

테스트 용도라 CORS 헤더를 "*" 사용해서 모두 허용했지만,

필요에 맞게 값은 수정하면 된다.

 

CORS 헤더

• Access-Control-Allow-Origin
• Access-Control-Allow-Headers
• Access-Control-Allow-Methods
• Access-Control-Allow-Credentials
• Access-Control-Max-Age

---