[Spring Boot] CORS 설정

프론트엔드와 통신하다보면 cors 에러가 종종 발생한다.

 

해결방법

프로젝트 패키지 안에 config 패키지를 생성하고, 그 안에 WebConfig.java를 생성한다.

WebConfig.java

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("*") // 허용할 출처
                .allowedMethods("*") // 허용할 HTTP method
                .allowedHeaders("*") // 허용할 헤더
                .allowCredentials(true) // 쿠키 인증 요청 허용
                .maxAge(3600); // 원하는 시간만큼 pre-flight 리퀘스트를 캐싱
    }
}

 

원인

동일 출처 정책(SOP) 때문에 CORS 에러가 발생한다.

SOP(Same-Origin Policy)

브라우저에는 SOP(Same-Origin Policy) 동일 출처 정책이 적용되어있다. 동일 출처 정책이란 말 그대로 동일한 출처에서만 리소스를 공유할 수 있다는 뜻이다. 출처가 다른 서버에 응답을 받게 되면 이를 차단하기 때문에 CORS 에러가 발생한다.

여기서 말하는 출처(Origin)는 URL에서 Protocol, Host, Port 부분을 의미한다.

예를 들어, https://localhost:8080/user 의 URL이 있다고 하면 Protocol, Host, Port는 아래와 같다.

• Protocol - https://
• Host - localhost
• Port - :8080

http://localhost:8080 은 프로토콜이 다르므로 다른 출처로 인정된다.

 

동일 출처 정책이 필요한 이유

보안 때문이다.

브라우저는 토큰이나 쿠키 등으로 사용자의 개인 정보가 저장된 데이터를 가지고 있는데, 만약 해커가 이를 뺏어와 해커 서버로 보낸다면 이는 심각한 문제로 발전할 수 있다. 따라서 기본적으로 JS는 자신이 실행된 서버의 내용만 읽을 수 있도록 한다.

 

CORS (Cross-Origin Resource Sharing)

CORS는 다른 출처의 리소스 공유에 대한 허용/비허용 정책이다. 위의 동일 출처 정책에서 발생하는 오류를 해결하기 위해 만들어진 해결 용도이다. 보안 문제로 SOP 정책을 사용하지만, 인터넷을 사용하면서 다른 서버로부터 응답을 많을 일이 많기 때문에 이 정책을 사용한다.

 

CORS의 동작을 살펴보면 다음과 같다.

클라이언트에서 HTTP요청의 헤더에 Origin을 담아 전달한다. 서버는 응답헤더에 Access-Control-Allow-Origin을 담아 클라이언트로 전달한다. 그러면 클라이언트에서 Origin이 Access-Control-Allow-Origin에 해당하는지를 비교한다. 그래서 Origin이 허용되면 브라우저에서 응답을 받을 수 있고, 아니라면 응답이 차단된다.

 

기본적으로 프론트와 통신하게 되면, 프론트의 Origin과 백엔드의 Access-Control-Allow-Origin(초기값은 서버 주소로 설정됨)가 다르기 때문에 오류가 발생한다. 따라서 CORS 오류를 해결하기 위해서는 Access-Control-Allow-Origin에 허용할 출처를 추가하면 된다.

 

registry.addMapping("/**")
        .allowedOriginPatterns("*") // 허용할 출처
        .allowedMethods("*") // 허용할 HTTP method
        .allowedHeaders("*") // 허용할 헤더
        .allowCredentials(true) // 쿠키 인증 요청 허용
        .maxAge(3600); // 원하는 시간만큼 pre-flight 리퀘스트를 캐싱

allowedOriginPatterns 를 통해 Access-Control-Allow-Origin을 설정한다. 위 코드에서는 와일드 카드(*)를 사용하여 모든 출처가 허용되도록 설정했다.

그 외에도 메소드, 헤더 등을 설정할 수 있다.

 

참고

https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F

🌐 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏