Hybrid App에서 access-control-allow-origin 이슈

하이브리드 앱에서 cross domain으로 ajax 요청을 하고 싶다면 어떻게 할까?
하이브리드 앱도 패키징되어 있지만 웹 브라우저에서 구동되고 있기 때문에 same-origin policy에 영향을 받는것 같다
즉, 웹 페이지가 동작하고 있는 주소와 ajax를 요청하는 주소가 다르면 웹 브라우저가 ajax 요청을 거부하게 된다.
이를 해결하는 올바른 방법으로는 아래와 같은게 있다.

1. 백엔드가 CORS 처리를 해서 Allow-Control-Allow-Origin에 *을 넣어주거나 특정 도메인을 넣어 주던 해서 브라우저에게 응답 해줘야 한다
백엔드가 Spring으로 개발된다면 아래 글을 참고
https://spring.io/blog/2015/06/08/cors-support-in-spring-framework

2. ajax요청을 jsonp로 만들어서 보낸다
jsonp로 팩킹해서 보내면 브라우저에서 허용해준다

3. cross domain proxy를 이용한다

문제는 위 방법 전부다 자신이 손댈 수 잇는 백엔드가 있어야 한다. 즉, 전혀 서버쪽을 손댈 수 없는 경우에는 사용하기가 어렵다. 예를 들어서 네이버 뉴스 크롤링 하이브리드 앱을 만든다고 하자. 네이버 도메인의 백엔드를 손댈 수 있을리가 없잖은가?!

위와 같은 정석 방법 외에도 글을 찾다보면 아래와 같은 방법이 있다는데 검토 해보지는 않았다.
* http://blog.monstuff.com/archives/000280.html
* http://webtn.tistory.com/entry/javascriptCross-Domain-%EA%B9%A8%EB%B6%80%EC%88%98%EA%B8%B0

다행히도, 하이브리드 앱 패키징을 cordova 나 phonegap으로 한다면 whitelist plugin을 이용하면 cross domain ajax가 허용된다. 관련 자료는 아래 참조.

https://cordova.apache.org/docs/en/latest/guide/appdev/whitelist/index.html

ionic 프레임워크를 이용해서 앱을 개발한다면 아래와 같이 적어준다.
$ cordova plugin add cordova-plugin-whitelist –save
주의 할점은 ionic 으로 개발하는데 livereload 기능을 이용하면 whitelist 기능이 작동하지 않았다.

또한 로컬에서 하이브리드 앱을 개발할 땐 대부분 에뮬레이터(또는 실기계)에 올리지 않고 웹브라우저를 이용해서 개발하는 게 일반적인데, 이 경우에서 same-origin policy 때문에 ajax가 실패한다.

구글링 해서 찾아본결과, chrome 이나 safari 나 same-origin policy를 비활성화 하는 옵션이 있다고 하는데, 최근 버전들에서는 해당 옵션을 더 이상 사용할 수 없게 만들었다. ㅠ_ㅠ

가능한 방법으로 찾은게 있는데, chrome plugin으로 해결하는 방법이다.
https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi
이 플러그인을 설치한다음 활성화 하고, 접속하려고 하는 도메인을 추가해주면 해결된다.

관련자료
* http://gonehybrid.com/a-little-bit-of-web-scraping-in-a-hybrid-mobile-app/
* http://stackoverflow.com/questions/15005500/loading-cross-domain-html-page-with-ajax

Advertisements

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

w

%s에 연결하는 중