CORS 정책

CORS 정책?

도메인이 다른 서버끼리 리소스를 주고 받을 때 보안을 위해 설정된 정책인 CORS(Cross-Origin Resource Sharing)

CORS는 웹 브라우저가 하나의 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 자원에 접근할 수 있는 권한을 부여하도록 하는 메커니즘이다. 웹 사이트가 다른 도메인에서 리소스를 요청할 때 보안을 유지하면서 접근할 수 있도록 도와준다.

예를들어 웹 사이트 A가 API 서버 B에서 데이터를 가져오려 할 때, API 서버 B에서 CORS 허용 설정이 되어 있지 않으면 웹 브라우저에서 API 접근이 거부될 수 있다. 이는 보안을 위해 웹 브라우저에서 자동으로 차단하는 것.

ex) React 서버(3000 포트) → Springboot 서버(8080 포트) 리소스를 주고받으려 할 때 CORS 위반 에러가 발생.

Origin (출처)란 무엇인가?

CORS를 이해하려면 우선 "출처"에 대해 알아야 한다.

• SOP (Same Origin Policy): 동일한 Origin만 리소스(데이터)를 공유할 수 있는 정책.
• Origin: Protocol, Host, Port 번호까지 모두 합친 것.
  • same-origin: 위의 3가지가 모두 같으면 동일 출처.
  • cross-origin: 위의 3가지 중 하나라도 다르면 다른 출처.

CORS 설정 방법

서버에서 CORS를 허용하려면 몇 가지 설정이 필요하다.
예를 들어, Springboot 서버에서는 다음과 같이 설정할 수 있다.

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

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:3000")
                        .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                        .allowedHeaders("content-type", "authorization", "x-requested-with")
                        .allowCredentials(true);
    }
}

registry.addMapping("/**")

• 모든 경로에 대해 CORS 정책을 적용한다는 의미이다. "/**"는 애플리케이션의 모든 URL 경로를 의미한다.

allowedOrigins("http://localhost:3000")

• http://localhost:3000 출처에서 오는 요청을 허용한다.

allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")

• GET, POST, PUT, DELETE, OPTIONS 메서드를 사용할 수 있도록 허용한다.

allowedHeaders("content-type", "authorization", "x-requested-with")

• content-type, authorization, x-requested-with 헤더를 사용할 수 있도록 허용한다.

allowCredentials(true)

• 자격 증명(쿠키, 인증 정보 등)을 요청에 포함할 수 있도록 허용한다. 이는 보안 관련 설정으로, 클라이언트가 자격 증명을 포함한 요청을 서버에 보낼 수 있도록 한다
• allowCredentials(true)로 설정하면 어떠한 허용에도 ("*")는 사용이 불가능하다.
  • 여기서 좀 고생했다.