SCHOOL/캡스톤
[졸프 백엔드] CORS
chaerrii
2024. 8. 5. 15:02
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 해결법
- @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 객체는 허용되는 출처, 메서드, 헤더를 지정하는 객체로 이 방식을 사용하기 위해서는 최소한의 출처와 메서드를 지정해야 한다.
참고한 링크들 !