Cordova(Phonegap) + Ionic Framework - "Access-Control-Allow-Origin" 문제점 해결방법 (CORS)

문제점 발생

XMLHttpRequest cannot load 도메인. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.

• 현재 도메인과 Ajax 통신할 도메인이 서로 다르기 때문에 접근을 할 수 없다는 것입니다.
• 핸드폰에 직접 개발하는 앱을 설치해서 구동할 경우에는 정상적으로 동작을 하겠지만 로컬 테스트 시에는 위와 같이 Cross Domain 문제점이 발생하게됩니다.
• 물론 ajax 통신 할 서버에서 Cross Domain 도 접근을 허락해 주는 설정을 할 수도 있겠지만 그건 극히 드문 경우라고 할 수 있다.

문제점 발생

Ionic Framework 를 사용할 경우 이 문제점을 쉽게 해결 할 수 있는 방법이 존재 합니다.

# com.ionic.sample/ionic.project 파일

{
	"name": "com.ionic.sample",
	"app_id": "b9ec9571",
	"proxies": [
		{
			"path": "/requestApi",
			"proxyUrl": "http://www.another.com/api/requestApi"
		}
	]
}

# js

angular.module('Example', [])

.controller('ExampleController', function($scope, $http) {

    $http({
        method: 'GET',
        url: '/requestApi',
        params: {},
        headers: {}
    })
    .success(function(data) {
        console.log(data);
    })
    .error(function(err) {
        console.log(err);
    })
    ;

});

# ionic 재 시작

$>ionic serve

단! 로컬 테스트 시에만 위와 같이 하시고 실제 앱에 설치 시에는 실제 경로로 변경해주셔야 합니다.