[ionic] Proxy 설정

[ionic] Proxy 설정

`ionic serve` 로 실행을 한 후에, 다른 서버로 ajax 요청을 하게 되면 에러가 발생합니다. 

XMLHttpRequest cannot load http://api.ionic.com/endpoint. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.

`origin`은 현재 보고 있는 호스트를 의미합니다.

`http://cors.api.com/api`로 ajax 요청을 보내게 되면, 호스트가 다르기 때문에, 자원에 접근이 가능한지 확인하게 됩니다. 

먼저 `ionic.project` 파일에, proxies 를 추가합니다. 

{ "name": "demo-blank", "app_id": "", "proxies": [ { "path": "/proxy/evernote", "proxyUrl": "https://sandbox.evernote.com" }, { "path": "/proxy/google", "proxyUrl": "http://www.google.co.kr" }, { "path": "/proxy/naver", "proxyUrl": "http://www.naver.com" } ] }

path 의 경로를 입력하면, proxyUrl로 변경이 되도록 합니다. 

html 에서 버튼에, ng-click 이벤트를 등록하고

<button class="button" ng-click="test()">테스트</button>

controller에서 함수를 구현합니다. 

.controller('NoteCtrl', function($scope, $http) {     $scope.test = function(){       $http.get('http://localhost:8100/proxy/naver').then( function(resp){ alert(resp.data); }, function(resp){ alert(resp.data); } ); }

서버를 실행하면, 

프록시 설정을 확인 할 수 있습니다. 

프록시 설정을 바꾸게 되면, 서버를 다시 실행해야 합니다. 

C:\demo-blank>ionic serve Running live reload server: http://localhost:35729 Watching : [ 'www/**/*', '!www/lib/**/*' ] Proxy added: /proxy/evernote => https://sandbox.evernote.com/ Proxy added: /proxy/google => http://www.google.co.kr/ Proxy added: /proxy/naver => http://www.naver.com/ Running dev server: http://localhost:8100 Ionic server commands, enter:   restart or r to restart the client app from the root   goto or g and a url to have the app navigate to the given url   consolelogs or c to enable/disable console log output   serverlogs or s to enable/disable server log output   quit or q to shutdown the server and exit

직접 접근하면, 에러가 발생하지만, 위와같이 proxy 설정을 통하면, 자원을 얻을 수 있습니다. 

=== 참고 ===

• http://blog.ionic.io/handling-cors-issues-in-ionic/