No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '(requested domain)' is therefore not allowed access.
크롬 브라우저에서 위와 같은 에러가 나타날때가 있습니다. 이는 ajax로 현재 서버가 아닌 다른 서버로 요청을 날리면 출력되는 에러 입니다. 자바스크립트는 보안 정책 중에 동일 출처 정책(Same-Origin Policy) 라는 정책이 있습니다.
요즘에는 REST API를 많이 사용하기 때문에, 상황에 따라 다르겠지만, 조금은 overStack 정책이라고도 생각 합니다. 따라서 CORS(Cross-Origin-Resource-Sharing) 이라는 정책이 생겼습니다. ajax로 외부 서버에 요청을 하는 경우를 허용하는 정책 입니다.
Cors 정책을 허용하는 여러가지 방법이 있습니다.
그중에서 오늘은 Spring Framework 을 이용해서 Cors를 허용하는 방법을 소개 하겠습니다.
브라우저는 서버에 요청을 날리기 전에 preflight request(사전 요청) 을 날립니다.
이때 서버로 부터 header의 다음과 같은 옵션 사항을 확인 합니다.
Access-Controll-Allow-Origin : *
Access-Controll-Allow-Methods : GET, POST, PUT, DELETE, OPTIONS
Access-Controll-Max-Age : 3600
Access-Controll-Allow-Headers : Origin, X-Requested-With, Content-Type, Accept
이와 같은 옵션을 확인 하고 'Access-Controll-Allow-Origin' 의 허용할 서버의 도메인 주소를 알려주면 됩니다. * (와일드 카드)를 입력하면 모든 도메인을 허용 한다는 뜻 입니다.
이를 Spring Framework에 적용 하려면 다음과 같은 방법이 있습니다.
1. filter 를 이용하는 방법
2. Interceptor 를 이용하는 방법
3. @CrossOrigin 어노테이션을 이용하는 방법
1번과 2번은 다음의 stackOverflow 의 소스코드와 함께 잘 설명 되어 있습니다.
https://stackoverflow.com/questions/55363203/enable-cors-using-spring-3-0-4
다만, stackOverflow에서는 interceptor를 java로 등록 하는 방법을 설명했지만, 서블릿 xml 파일을 수정하여 다음과 같이 interceptor를 등록 할 수 있습니다.
<mvc:interceptors>
<mvc:interceptor>
<mvc:mapping path="/**"/>
<beans:bean id="CorsInterceptor" class="com.hongbog.util.CorsInterceptor"></beans:bean>
</mvc:interceptor>
</mvc:interceptors>
3번 @CrossOrigin 어노테이션은 스프링 4.2 버전부터 사용 가능합니다.
사실 어노테이션만 컨트롤러나 RequestMapping에 적용만 해주면 되서 가장 쉬운 방법 입니다.