spring에서 CORS 설정하기

교차 출처 리소스 공유(CORS, Cross-origin resource sharing)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 보냅니다.

 

별다른 설정을 하지 않을 경우 다른 도메인의 리소스를 접근하려고 하면 아래와 같은 에러 메시지가 브라우저에 표시됩니다.

 

Access to fetch at ‘https://api.lubycon.com/me’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

 

이 오류를 해결하기 위한 방법은 여러 가지가 있지만, 이 포스팅에서는 Spring에서 해결하는 방법을 명시합니다.

 

@RestController
@RequestMapping("/user")
public class UserController {
  @CrossOrigin
  @RequestMapping("/{id}")
  public User retrieve(@PathVariable Long id) {
    // ...
  }
  
  @RequestMapping(method = RequestMethod.DELETE, value  = "/{id}")
  public void remove(@PathVariable Long id) {
    // ...
  }
}

 

Spring 4.2부터 지원되는 @CrossOrigin 어노테이션은 CORS를 Spring을 통해 설정할 수 있는 기능입니다.

@CrossOrigin 어노테이션을 붙여주면 기본적으로 모든 도메인, 모든 요청방식에 대해 허용한다는 뜻입니다.

위 예제에서는 retrieve 메서드에 @CrossOrigin 어노테이션을 선언했기 때문에 해당 메서드에만 적용됩니다. 만약, 여러 메서드에 동일하게 적용하고 싶다면 Class에 @CrossOrigin 어노테이션을 선언하면 됩니다.

 

만약 특정 도메인만 허용하고 싶다면 아래와 같이 하면 됩니다.

@CrossOrigin(origins = "yjh5369.tistory.com")