CORS란? / React + Spring Boot CORS 문제 해결

1. CORS란?

CORS(Cross-Origin Resource Sharing)는 웹 브라우저가 보안상의 이유로 다른 출처(Origin)에서 리소스를 요청하는 것을 제한하는 정책입니다. 기본적으로 브라우저는 보안 문제로 인해 다른 도메인, 프로토콜, 포트에서 오는 요청을 차단합니다.

예를 들어, 웹사이트 A가 API 서버 B에서 데이터를 가져오려할 때, API 서버 B에서 CORS 허용 설정이 되어있지 않다면 브라우저는 요청을 차단할 수 있습니다. 이때 CORS를 올바르게 설정하면 특정 도메인에서의 요청을 허용할 수 있습니다.

 

 

2. CORS가 필요한 이유

웹 보안의 핵심 원칙 중 하나는  동일 출처 정책(SOP, Same-Origin Policy)입니다. 동일 출처 정책은 한 사이트에서 로드된 웹 페이지가 다른 출처의 리소스에 무분별하게 접근하는 것을 방지하여 보안성을 높이는 역할을 합니다.

그러나 오늘날 많은 웹 애플리케이션이 REST API를 활용하여 데이터를 주고받기 때문에, 다른 출처에서 데이터를 받아올 필요가 많아졌습니다. 이럴 때 필요한 것이 바로 CORS 설정입니다.

 

 

3. CORS에서의 출처(Origin) 판단 기준

 

CORS에서 "출처(Origin)"는 프로토콜(HTTP/HTTPS), 도메인(예: example.com), 포트(예: 8080) 세 가지 요소를 기준으로 정의됩니다. 즉, 동일 출처 정책에 따라, 두 리소스가 같은 프로토콜, 도메인, 포트를 공유할 경우 "동일 출처"로 간주됩니다. 이 기준에 맞지 않으면 브라우저는 두 리소스를 다른 출처로 판단하여 CORS를 차단할 수 있습니다.

 

 

예를 들어, 웹사이트 A (https://www.siteA.com)에서 API 서버 B (https://api.siteB.com)로 요청을 보내면, 다른 도메인, 프로토콜을 사용하므로 이는 "다른 출처"로 간주됩니다. 만약 API 서버 B가 CORS 설정을 하지 않았다면, 브라우저는 A의 요청을 차단합니다.

 

+) React와 Spring Boot 간의 CORS 처리 예시

React에서 Spring Boot 백엔드 서버로 요청을 보낼 때, 기본적으로 서로 다른 출처 간에 요청이 발생하므로 CORS 설정이 필요합니다.  이를 해결하기 위해 Spring Boot에서 CORS 설정을 통해 React 의 도메인을 허용하도록 설정해야 합니다.

 

Spring Boot에서 CORS 설정 예시

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:3000")  // React 도메인 주소
                .allowedMethods("GET", "POST", "PUT", "DELETE");
    }
}

 

이렇게 설정하면 React 애플리케이션에서 Spring Boot 서버로 오는 모든 요청에 대해 CORS가 허용됩니다.