브라우저 초기에 보안상의 이유로 스크립트 내에서 시작된 교착 출처 HTTP 요청을 제한하는데, 이를 SOP(Same-Origin Policy, 동일 출처 정책)라 한다.

동일 출처?

SOP는 두 Origin 간에 프로토콜, 포트, 호스트가 같아야 동일 Origin라고 할 수 있다.

예를 들어, http://www.heowc.com 이라는 URL이 있다면 다음과 같은 상황이 발생한다.

graph LR H1[http://www.heowc.com/user] -->|성공| H[http://www.heowc.com] H2[https://www.heowc.com] -.->|실패 - 프로토콜 상이|H[http://www.heowc.com] H3[http://www.heowc.com:8080] -.->|실패 - 포트 상이| H[http://www.heowc.com] H4[http://blog.heowc.com] -.->|실패 - 호스트 상이| H[http://www.heowc.com]

CORS

그래서 이를 보완하기 위해 브라우저측에서 JSONP를 사용하거나, 서버측에서 CORS를 이용하여 해결할 수 있다. 여기서 CORS(Cross-Origin Resource Sharing) 란, 웹 서버 도메인간 액세스 제어 기능을 제공하여 보안 도메인간 데이터 전송을 가능하게 해준다.

CORS 동작과정
  1. pre-flight : 실제 요청하려는 경로와 같은 URL에 대해 OPTIONS로 요청을 날려보고 요청가능한지 확인
  2. 실제 요청

Alt CORS 동작과정

Spring Boot에서 활용 해보기

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

  • Access-Control-Allow-Orgin : 요청을 보내는 페이지의 출처 (*, 도메인)
  • Access-Control-Allow-Methods : 요청을 허용하는 메소드 (Default : GET, POST, HEAD)
  • Access-Control-Max-Age : 클라이언트에서 pre-flight의 요청 결과를 저장할 시간 지정. 해당 시간 동안은 pre-flight를 다시 요청하지 않는다.
  • Access-Control-Allow-Headers : 요청을 허용하는 헤더

그리고 Spring과 Spring Boot에서는 아래의 2가지 방법으로 CORS를 해결할 수 있다.

Controller 지정

개별적으로 허용하는 방법으로는 @CrossOrigin를 사용하는 것이다.

1
2
3
4
5
@CrossOrigin("*")
@GetMapping("{value}")
public String get(@PathVariable String value) {
return value;
}
Global하게 지정

WebMvcConfigurer를 구현하거나 다음과 같이 @Bean으로 등록하여 addCorsMappings에 원하는 path를 추가하면 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
@Bean
public WebMvcConfigurer webMvcConfigurer() {
return new WebMvcConfigurer() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/message/**")
.allowedOrigins("*")
.allowedMethods(HttpMethod.POST.name())
.allowCredentials(false)
.maxAge(3600);
}
};
}

참고

SpringBootSample / SpringBootCors