CORS를 해결해보자

CORS

CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유) 는 말 그대로 해석해보면 교차하는 출처끼리 리소스 공유를 허용한다는 의미이다.

Protocol, Host, Path, Query String, Fragment 구성 요소 중 출처(Origin)는 Protocol과 Host, 그리고 :80 , :443 같은 포트 번호까지 모두 합친 것을 의미한다. 즉, www.google.com:443 까지를 출처라고 생각하면 된다. 참고로 HTTP는 포트 번호가 80번, HTTPS는 포트 번호가 443번으로 정해져 있어서 이 번호를 생략해도 무방하다.

Origin

URL구조에서 Protocol, Host, Port를 합친 것을 말한다.

즉 cross origin은 다음 중에 하나라도 다른 경우에 발생한다.

WebMvcConfigurer로 Cors 해결하기

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:5173")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*");
    }
}

WebMvcConfigurer를 상속받은 config클래스를 만들어 전체 경로에 대해 정해진 Origin이 존재하다면 메소드 요청을 허용한다는 의미이다.

WebMvcConfigurer

스프링에서는 @Enable로 적용되는 인프라 빈에 대해 추가적인 설정을 할 수 있도록 ~Configurer로 끝나는 인터페이스(빈 설정자)를 제공하고 있다. 이를 구현한 클래스를 만들어 빈으로 등록하면 @Enable 전용 어노테이션을 처리하는 단계에서 설정용 빈을 활용해 인프라 빈의 설정을 마무리한다.

이렇게 처리된 Cors처리는 SpringMVC에서 주로 사용된다.

현재 로그인처리는 JWT처리로 인해 controller가 아닌 Filter를 이용하여 처리하고 있고 동시에 JWT 검사를 하고있다.

Servlet 필터는 Spring의 Dispatcher Servlet이 처리하기 전에 실행되며, CORS 처리는 Dispatcher Servlet 이후에 처리되기 때문에, 필터에서의 요청은 CORS 설정이 적용되지 않는다.

따라서 Filter로 CORS를 허용해주어야 한다.

Filter로 CORS처리하기

public class CorsFilter implements Filter {

    final static String requestOrigin = "허용 origin";

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        HttpServletRequest request = (HttpServletRequest) servletRequest;
        String origin = request.getHeader("Origin");

        log.info("request origin = {}", origin);
        if (requestOrigin.contains(origin)) {
            response.setHeader("Access-Control-Allow-Origin", origin);
        }
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, DELETE, PUT, OPTIONS");
        response.setHeader("Access-Control-Allow-Headers", "*");
        chain.doFilter(servletRequest, response);
    }
}

설정한 Origin에서 요청한다면 Access-Control-Allow-Origin 에 Origin을 넣어주고 모든 header와 메소드 요청을 허용하였다.

전체 Origin을 허용한다면 보안상 문제가 될 수 있으므로 특정 Origin만을 허용하도록 하는 것이 좋다.