Spring Boot로 CORS 해결하기

"CORS"
오늘 개발하면서 처음 들은 단어이다.

서로 다른 도메인에서 접근하게 되면 위와 같은 에러가 뜬다.

캡스톤 프로젝트를 진행하면서 프론트 개발하는 분이 CORS를 해결해야 한다고 해서 이게 뭔가 싶어서 찾아봤다.

CORS를 이해하기 전에 SOP에 대해서 먼저 알아보자.

SOP이란?

Same-origin policy의 줄임말로 같은 Origin에만 요청을 보낼 수 있게 제한하는 보안 정책을 말한다.
Orgin의 구성은 다음과 같다.

• URL Schema (Ex. http, https)
• Hostname (Ex. localhost, google.com)
• Port (EX. 80, 8080)

이 중 하나라도 다르면 SOP 정책에 위반되어 AJAX 요청이 불가하다.

CORS이란?

Cross-Origin Resource Sharing의 줄임말로 서로 다른 Origin끼리 요청을 주고 받을 수 있게 정해둔 표준이다.

CORS 사용 방법

서버에서 브라우저에 다음과 같은 키를 header에 보내줘야 한다.

• Access-Controll-Allow-Origin: 요청을 보내는 페이지의 출처 (*, 도메인)
• Access-Controll-Allow-Method: 요청을 허용하는 메소드
• Access-Controll-Allow-Age: 클라이언트에서 pre-flight의 요청 결과를 저장할 시간 지정
• Access-Controll-Allow-Header: 요청을 허용하는 헤더

pre-flight란 실제 요청하려는 경로와 같은 URL에 대해 OPTIONS로 요청을 날려보고 요청 가능한지 확인하는 request이다.

CROS 스프링 부트에서 사용하기

스프링부트에 CORS를 적용할 수 있는 방법은 두 가지 정도 있는 것 같다.

1. @CrossOrigin 추가

@CrossOrigin(orgins = "http://localhost:8080")
@RestController
public class ApiController {

    @GetMapping("/api/v1")
    public String hello() {
        return "hello";
    }
}

위 코드와 같이 @CrossOrigin 어노테이션을 추가하면 CORS를 적용할 수 있다.

2. WebConfig에 CORS 설정

@Configuration
public class WebConfig implements WebMvcConfigurer {

  @Override
  public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/**")
        .allowedOrigins("http://localhost:8080");
  }
}

위 코드와 같이 WebMvcConfigurer를 상속 받아 CORS를 적용할 수 있다.
localhost:8080에서 오는 요청은 어느 url이든 CORS가 적용된다.

도움 받은 글

• https://shinsunyoung.tistory.com/86
• https://heowc.dev/2018/03/13/spring-boot-cors/