REST API CrossOrigin Annotation 간단 정리

 Front와 Back 으로 나눠서 개발을 진행 하는 수업을 하였다. 근데 말입니다? 코드가 틀린 곳이 없는데 자꾸 에러가 뜨는거에요? 자꾸 CORS가 어쩌고 저쩌고,  CrossOrigin이 어쩌고 저쩌고 이런 말이 개발자 도구에서 사라지지 않아...

 

암튼 그래서 궁금해서 열심히 찾아 봤다. 

일단 CORS(Cross-origin resource sharing) 은 오류나 에러가 아니라 하나의 보안 정책이라고 생각하면 된다. 

 

Same-origin policy 

CORS를 알기전에 우선 반대 개념인 Same-origin policy(동일 출처 정책)를 알아야 한다. 

동일 출처 정책이란 : 프로토컬, 도메인, 포트가 모두 같은 어떤 사이트가 있다면 해당 사이트에서 가져온 리소스와 상호작용을 제한하는 중요한 보안 방식이다.  동일 출처 정책은 잠재적으로 해로울 수 있는 문서를 분리함으로써 공격받을 수 있는 경로를 줄여준다. 

 

CORS란? 

• Same-origin policy(동일 출처 정책)와 반대되는 개념
• 서로 다른 도메인에서 리소스를 공유하는 방식
• 웹 페이지의 제한된 자원을 외부 도메인에서 접근을 허용해주는 매커니즘
• 처음 전송되는 리소스의 도메인과 다른 도메인으로부터 리소스가 요청될 경우 해당 리소스는 cross-origin HTTP 요청

 

보통 api를 이용할 때 ajax로 통신을 하는데 Same-origin policy를 따르지 않을 경우 오류가 생긴다. 

이걸 해결 하기 위해서 두가지 방법이 있는데, 

 

1. JSONP(Json with padding) 방식을 이용한다.

이 방식은 클라이언트측의 js, css는 Same-origin policy를 따르지 않아도 되기 때문에 서버에서 값을 돌려줄때 js 파일 처럼 값을 돌려주고 클라이언트는 콜백 함수로 재처리 하여 사용하는 것이다. 

 

2. CORS를 설정 해 주는 방법이 있는데 그게 바로 @CrossOrigin 어노테이션이다.  

스프링 4.2 부터 지원되는 @CrossOrigin 어노테이션은 CORS를 스프링을 통해 설정할 수 있는 기능이다. @CrossOrigin 어노테이션을 붙여주면 기본적으로 '모든 도메인, 모든 요청방식' 에 대해 허용 한다는 뜻이다.

 

@CrossOrigin 어노테이션 사용 방법

 

▶ 메소드 위에 작성하였다면  해당 메소드만 모든 도메인, 모든 요청방식에 대해 허용하게 된다.

@CrossOrigin
public Map add{
...코드들
    }

 

▶ 만약에 여러 도메인을 허용하고 싶다면?

class 위에 @CrossOrigin 어노테이션안의 파라미터로  origins에  두개의 주소를 " " 안에 입력 해 주면 된다. 

@RestController 
@CrossOrigin(origins = "http://... , http://....") 
public class MemoController {

 

▶ 그렇다면 모든 사이트를 허용하고 싶다면? 

class 위 @CrossOrigin 어노테이션에 * 를 사용하면 된다. 

@RestController 
@CrossOrigin(origins = "*") // 모든 ip로부터 요청 받기 허용
public class MemoController {