일반적으로 브라우저는 로드된 도메인 이외의 도메인에 대한 요청을 허용하지 않는다.

떄문에 벡엔드와 프론트엔드가 다른 도메인에서 호스팅된다면 클라이언트가 서버에 api요청을 할때 브라우저는

api응답을 받지 않을 것이다.

CORS 메커니즘은 이러한 엄격한 정책은 완화시켜 준다.

CORS 메커니즘은 HTTP헤더를 기반으로 작동한다.

---

CORS 메커니즘의 HTTP헤더 필드

Access-Control-Allow-Origin

도메인의 리소스에 접근할 수 있는 외부 도메인 지정

Access-Control-Allow-Method

다른 도메인에 대해 특정 HTTP방식만 허용하고 싶을때 지정 가능

Access-Control-Allow-Headers

특정 요청에 이용할 수 있는 헤더에 제한을 추가

---

스프링 시큐리티의 기본동작

스프링 시큐리티는 위의 Header들을 기본적으로 추가해주지 않기 때문에 만일 다른 도메인에서 api를 요청하더라도 서버에서는 api에 대한 응답을 리턴해주지만 위 헤더들을 추가 안했기 때문에 브라우저에서 응답을 받지 않을 것이다.

---

CORS 설정하는 방법들

@CrossOrigin 어노테이션

controller에서 원하는 메서드에 어노테이션을 추가하면 된다

@PostMapping("/test")
@CrossOrigin({외부 도메인})
public String test() {
	return "TEST";
}

여러 출처를 정의하기 위해 {외부 도메인} 필드에 배열을 넣어도 작동한다.

@CrossOrigin을 사용하면 직접 엔드포인트가 정의되는 위치에서 CORS 도메인이 보이기 때문에 규칙이 투명해진다는 장점이 있지만 api가 많아진다면 코드의 중복이 많이 생긴다는 단점이 존재한다.

그래서 구성 클래스 내에서 CORS구성이 가능하다.

CorsConfig으로 설정

@Configuration
@EnableWebSecurity
public class CorsConfig {
    
    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http.cors(c-> {
            CorsConfigurationSource source = request -> {
                CorsConfiguration config = new CorsConfiguration();
                config.setAllowedOrigins("{외부 도메인}");
                config.setAllowedMethods("GET");
                return config;
            };
            c.configurationSource(source);
        });
        
        return http.build();
    }
}