크로스 도메인 이슈

서문

요즘 마이크로 서비스가 대세입니다.
저는 요즘 Vuejs 를 이용한 Web app 을 만들려고 시도 중입니다.
이 웹앱을 마이크로 서비스로 만들려합니다. 이러한 경우에 만나는 문제가 바로 크로스 도메인 문제, CORS(Cross Origin Resource Sharing) 이슈입니다.

환경

현재 시스템은 localhost:8080 에 떠있는 RESTful API Server 에. localhost:8082에 떠있는 Web App 에서 http 요청을 해서 데이터를 가져오는 형태입니다.

문제점

간단한 SPA(Single Page Application) 어플을 만들 때, 이 웹 어플리케이션에 채워지는 데이터는 REST API 를 이용, 비동기 네트워크 통신으로 API 서버와 WEB APP의 서버가 다른 경우가 생깁니다.

이때 Web app 에서 ajax를 이용해서 REST API 를 호출하면 Browser console window 에서 이런 에러를 만나게 됩니다.

XMLHttpRequest cannot load http://localhost:8080/v1/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8082' is therefore not allowed access.

원인

보안 상의 이유로, 브라우저들은 스크립트 내에서 초기화되는 cross-origin HTTP 요청을 제한하기 때문입니다.

해결책

간단합니다.
RESTful API서버의 RESPONSE HEADER 에 하나만 추가해주면 됩니다.

Access-Control-Allow-Origin: *

만약 특정 도메인만 허용하고 싶다면,

Access-Control-Allow-Origin: http://test.com, http://test2.com, …

이런 형태로 사용하시면 됩니다.