[Server] CORS 오류 해결 & CORS가 뭘까

프로젝트를 하면서 그 유명한 CORS 문제가 발생했다.

 

프론트 팀원에게 응답 헤더로 보내고있는 access token이 undefined 이라고 찍힌다고 말해줘서 오류를 한참 수정했다..

CORS 문제였던 것!

public CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.setAllowedOrigins(List.of("http://localhost:3000"));
        configuration.setAllowedMethods(List.of("GET", "POST", "PUT", "DELETE", "OPTIONS"));
        configuration.setAllowedHeaders(List.of("*"));
        configuration.setAllowCredentials(true);
        configuration.setExposedHeaders(List.of("access", "Set-Cookie"));

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return source;
    }

 

그래서 이렇게 cors 를 등록해줬다.

configuration.setExposedHeaders(List.of("access", "Set-Cookie")); 

이렇게 나는 access token을 응답 헤더에 access 필드에 담아 보내주고있는데 여기서 클라이언트가 접근가능하게 하려면 위와 같은 설정이 필요하다.

 

근데 여기서 CORS가 과연 뭘까! 확실하게 알고 넘어가지 않으면 다시 반복되는 오류와 함께 할 수 있기 때문에 공부를 해보자.

 

CORS란? 🤔

다른 origin에서 온 요청을 허용할지 말지를 결정하는 보안 정책이라고 한다. 사실 꼭 필요한 것이었던 것..!

 

사실 웹은 같은 origin 에서만 리소스 요청을 허용하는 보안 정책이 존재한다고 한다.

포트가 다르거나..프로토콜이 다르거나..도메인이 다르면 이런 보안 정책으로 문제가 발생한다.

 

브라우저는 이런 보안상의 문제로 다른 출처에서 온 요청을 기본적으로 차단한다.

그래서 백엔드에서 CORS 설정을 잘 해줘야지 클라이언트와 요청을 잘 처리할 수 있다.

 

그렇다면 다시 하나씩 각 코드를 살펴보자.

 

1. 허용한 origin 을 설정해준다. 서버는 8080 포트를 사용하고 있고, 클라이언트의 리액트는 기본적으로 3000포트를 사용한다. 그러니 3000포트를 허용한다는 설정을 추가해준다. 당연히! 이것은 클라이언트의 주소가 달라지면 다른게 작성해야 한다.

config.setAllowedOrigins(List.of("http://localhost:3000")); // 허용할 프론트엔드 URL

 

2. 클라이언트의 GET, POST, PUT, DELETE, OPTIONS 메서드를 통한 요청을 허용한다는 것이다.

config.setAllowedMethods(List.of("GET", "POST", "PUT", "DELETE", "OPTIONS"));

 

3. 프론트에서 접근할 수 있는 응답 헤더 목록을 지정하는 설정이다. 

클라이언트가 요청을 보낼 때 사용할 수 있는 헤더는 모두 허용(setAllowedHeaders("*"))하고, 응답을 받을 때 프론트에서 접근할 수 있는 헤더는 Authorization과 Set-Cookie라는 의미이다.

config.setAllowedHeaders(List.of("*"));
config.setAllowCredentials(true); // 쿠키 전달 허용
config.setExposedHeaders(List.of("Authorization", "Set-Cookie")); // 프론트에서 접근할 수 있는 헤더

 

 

CORS는 프로젝트를 하다보면 자주 만나게되는 문제이다. 보안상으로 매우 중요한 정책이기 때문에 잘 공부하고 잘 설정해주자!