[Spring Security] Spring-Boot 1.2.5와(8080포트) AngularJS(9000포트)의 포트 다를 시, CORS 필터 적용하기

최근 AngularJS에 대한 공부와, Yeoman에 대한 공부를 마치고, Yeoman을 사용한 프론트 세팅과 실행, 그리고 갑작스럽지만 내게는 딱 맞다 생각하는 Spring-Boot의 약간의 공부를 진행했다. 뭐 스프링 부트는 공부할 것도 없었지만..

Gradle이란 놈이 참으로 훌륭하더라. 여기에 Front/Backend의 프로젝트와 의존성을 물려놓고, 서로 커멘드 등의 명령어를 통해 실행하니 정말 잘 모듈별로 독립적이면서도 잘 맞물린다.

이제는 기존 Spring MVC와 Velocity, MyBatis로 구성된 소스를 SpringBoot – Hibernate(JPA)그리고 AngularJS를 통해 구성하기. 가장 기본적인 것은 로그인인데, 이 참에 Spring-Security를 적용해 보기로 하고, 가장 적절한 강좌를 찾았다.(아래 링크)

https://spring.io/guides/tutorials/spring-security-and-angular-js/

그런데 문제는, 이 강좌의 경우는 리소스를 WEB-INF에 넣고 AngularJS를 Spring Boot와 함께 돌리는데, 내 경우는 Spring-Boot는 Embedded Tomcat으로 8080포트를, AngularJS는 Yeoman으로 생성했기 때문에 node.js를 통해 9000포트가 되버렸다. 물론 나도 함께 구동하고 싶은 욕심은 있지만, 이걸 함께 구동하면 모듈화의 의미가 없어지기 때문에..

결국, 그렇게 해서 저 튜토리얼을 따라가다 보니 Cross-Domain문제에 직면했다. 인터넷을 찾아보니 아래 처럼 Filter를 implement해서 access-control을 정의하란다.

그런데 이 필터가 전혀! 먹히지 않는다. 크롬 디버거로 HTTP헤더를 봐도, 적용이 안되었다.. 

그래서 혹시나 해서, 위 강좌에 나온 CsrfHeaderFilter 안에다가 저 내용을 넣어봤더니, 그제서야 먹는다..

저렇게, Access-Control-Allow-Origin에 나의 경우는 http://localhost:9000을 넣어주고,

위에서처럼 $rootScope.serverUrl+'/doLogin' 를 통해 통신하게 했다. $rootScope.serverUrl은 App.js에 

이런식으로 마치 전역변수처럼 서버 URL을 생성해 두었다. 물론, 나중에 배포 문제 때문에 직접 URL을 쓰지 않고 $location 을 사용하여 바꿀 예정이다.

Translate »