1. 교차 출처 리소스 공유

교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제 - MDN

보안상의 이유로, 브라우저는 <script>에서 시작한 교차 출처 HTTP 요청을 제한한다. 예시로 XMLHttpRequest는 SOP(동일 출처 정책)을 따른다. 즉, 오픈 API를 사용하는 웹 애플리케이션은 자신의 출처와 동일한 리소스만 불러올 수 있다. 여기서 출처(origin)란 프로토콜, 도메인, 포트로 구성된다. 예를 들어 http://localhost:8080과 같은 주소가 있다면 http가 프로토콜이고, localhost가 호스트, :8080이 포트가 된다. 동일 출처는 프로토콜, 호스트, 포트가 모두 같은 경우를 말한다.

교차출처 리소스 공유(CORS)는 웹상의 리소스(데이터)를 최초 자원이 서비스된 도메인(origin) 밖의 다른 도메인(origin)으로부터 요청을 허용할 수 있도록 하는 것이다. 리소스를 제공하는 측이 이 리소스가 다른 도메인에서도 요청할 수 있도록 허용을 해 놔야 한다.

Spring을 예시로 들면 리소스를 제공하는 Controller 측에서 CrossOrigin 어노테이션을 붙어주면 된다.

@CrossOrigin

  • Annotation for permitting cross-origin requests on specific handler classes and/or handler methods.
  • 특정 핸들러 클래스나 메소드에 사용할 때 교차 출처를 허용하는 어노테이션이다.
  • @CrossOrigin(origins = “*“)는 모든 도메인에서 사용 가능한 리소스이다.
  • @CrossOrigin(origins = “http://localhost:8080”)은 해당 도메인에서만 리소스를 허용한다.
@CrossOrigin(origins = "*")
@RestController
public class SampleController {
    // 구현 생략
}