[Spring] CORS 관련 설정해보기 (@WebMvcConfigurer)

들어가기 앞서..

소문만 무성했던 cors 웹 개발에 있어서 한번씩 겪게되는 난관이라고 한다. 
이번 포스트에서 cors가 뭔지, cors를 해결하기 위해 java Spring에서는 어떤 방식을 사용해야하는지 알아보자!

 

CORS

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

Origin(출처)

https://lswnscel.tistory.com:433/manage/newpost?type=post#fragment

https:// -> protocal

lswnscel.tistory.com -> host

:433 -> port

/manage/newpost -> path

?type=post -> query

#fragment -> fragment

 

위 URL에서 우리가 주목할 부분은 Protocal, Host, Port 이다!

이 세 부분을 우리는 Origin(출처)라고 부른다. 외부에서 접근할 때, 출처가 다른 경우는 접근이 제한된다.

이렇게 접근 제한이 되는 이유는 바로 SOP 때문이다.

SOP (Same Origin Policy)

SOP는 보안을 위해 동일한 Origin(출처)에 대해서만 리소스에 접근할 수 있다는 정책이다.

URL	접근 가능?
https://lswnscel.tistory.com/	✅ Protocal, Host, Port 모두 같다!
https://lswnscel.tistory.com/post	✅ Protocal, Host, Port 모두 같다!
https://tistory.com/post	❌ Host가 다르다..
http://lswnscel.tistory.com/	❌ Protocal, Port가 다르다..
https://tistory.com:8080/post	❌ Port가 다르다..

 

위 케이스처럼 Protocal, Host, Port 가 모두 같은 경우에만 접근 가능하다!

그런데 이게 왜 문제가 되는걸까? 우리는 그 이유를 이제는 익숙한 프론트엔드, 벡엔드에서 찾을 수 있다. 예전엔 이 둘을 따로 구성하지 않고 한번에 구성했다고 한다. 그래서 Origin이 다른 경우 접근을 막는 것이 보안적으로 의미있었다. 하지만 현재는 둘로 나뉘며 클라이언트에서 서버에서 API를 직접 호출하기 시작하며 Origin이 다른 경우에도 리소스를 가져와야하는 경우가 생겼다. 그래서 우리는 Origin이 다른 경우에도 출처를 명시하여 접근을 허용해주는 방식으로 변경했다! 이 방식이 CORS 이다.

 

CORS 해결하기!

@WebMvcConfigurer 사용하기

위치

config패키지를 생성해 설정하는 경우가 일반적이다.

코드

import org.springframework.context.annotation.Configuration;
import org.springframework.http.HttpHeaders;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    private static final String ALLOWED_METHOD_NAMES = "GET,HEAD,POST,PUT,DELETE,TRACE,OPTIONS,PATCH";

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowedMethods(ALLOWED_METHOD_NAMES.split(","))
                .exposedHeaders(HttpHeaders.AUTHORIZATION)
                .maxAge(5000);

    }
}