[졸프 백엔드] CORS

Cors 란?

CORS란 Cross-Origin Resource Sharing 의 줄임말로, 교차 출처 리소스 공유라는 뜻이다.

기본적으로 브라우저는 사이트가 로드된 도메인 이외의 도메인으로 오는 요청을 허용하지 않지만, 우리가 백엔드와 프론트의 통신할 때는 필요하기 때문에 이를 꼭 허용해줘야 한다!

Cors 매커니즘

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

Cors 헤더 종류

Acceses-Control-Allow-Origin

: 도메인의 리소스에 접근할 수 있는 외부 도메인(원본)

Acceses-Control-Allow-Methods

: 다른 도메인에 대해 접근을 허용하지만, 특정 HTTP 방식만 허용하고 싶을 때 지정한다.

Acceses-Control-Allow-Headers

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

Cors 의 Preflight

브라우저가 요청을 보내기 전에 HTTP Options 방식으로 먼저 요청을 보내보는데, 이것이 Preflight 방식이다. 이 요청이 실패하면 브라우저는 원래 요청을 수락하지 않는다.

스프링부트와 Cors

스프링부트는 기본적으로 Cors 헤더를 설정하지 않기 때문에 프론트와의 통신 시 오류가 난다.

스프링부트의 Cors 해결법

1. @CrossOrigin

실무에서 쓰이지 않는다!

2. CorsConfigurer

나는 WebSecurityConfig 에서 스프링부트 공식 문서를 보고 정의했다.

   @Bean
   CorsConfiguration corsConfigurationSource(){
    CorsConfiguration cors = new CorsConfiguration();
    cors.setAllowOrigin // 허용할 출처(Origin)를 설정한다.
    cors.setAllowMethods // 허용할 Method 를 설정한다.
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration(“/**”,cors); // 모든 경로 “/**” 에 대해서 위에서 설정한 cors 구성한다.
    return source;
}

CorsConfigurer 객체는 허용되는 출처, 메서드, 헤더를 지정하는 객체로 이 방식을 사용하기 위해서는 최소한의 출처와 메서드를 지정해야 한다.

---

참고한 링크들 !

https://assu10.github.io/dev/2024/01/09/springsecurity-cors/#3-corsconfigurer-%EB%A1%9C-cors-%EC%A0%81%EC%9A%A9