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

Transport Security has Blocked a cleartext HTTP

iOS9에서 아래와 같은 에러가 난다면…

Transport security has blocked a cleartext HTTP (http://) resource load since it is insecure. Temporary exceptions can be configured via your app’s Info.plist file.

xcode에서 info.plist 파일에 아래와 같은 내용을 추가해줘야 한다.

 

    NSAppTransportSecurity
    
        NSExceptionDomains
        
            urbanpoly.com
            
                
                NSIncludesSubdomains
                
                
                NSTemporaryExceptionAllowsInsecureHTTPLoads
                
                
                NSTemporaryExceptionMinimumTLSVersion
                TLSv1.1
            
        
    
    NSAppTransportSecurity
    
        
        NSAllowsArbitraryLoads
        
    

참고 : http://stackoverflow.com/questions/31254725/transport-security-has-blocked-a-cleartext-http

Sencha List Lazy Loading

기본적으로 Sencha List에 infinite 라는 속성을 true로 하면 화면에 보여질때 rendering하도록 하는 기능이 있는데, 이걸 사용하면 css layout이 이상해진다.

그래서 외쿡 능력자가 사제로 만들었다.

https://github.com/nathando/st-lazyload-list

이런데 이 라이브러리도 한계(?)가 있었으니, 한번 불러온 이미지는 그대로 계속 메모리에 가지고 있어서 엄청 스크롤을 빨리하면 버벅인다…

cordova ios build 에러

2013-08-23 14:36:18.284 Tell The DJ[14955:c07] ERROR: Plugin 'Device' not found, or is not a CDVPlugin. Check your plugin mapping in config.xml.
2013-08-23 14:36:18.284 Tell The DJ[14955:c07] -[CDVCommandQueue executePending] [Line 116] FAILED pluginJSON = [
  "Device1096677259",
  "Device",
  "getDeviceInfo",
  [

  ]
]
2013-08-23 14:36:18.285 Tell The DJ[14955:c07] CDVPlugin class CDVConnection (pluginName: NetworkStatus) does not exist.
2013-08-23 14:36:18.285 Tell The DJ[14955:c07] ERROR: Plugin 'NetworkStatus' not found, or is not a CDVPlugin. Check your plugin mapping in config.xml.
2013-08-23 14:36:18.285 Tell The DJ[14955:c07] -[CDVCommandQueue executePending] [Line 116] FAILED pluginJSON = [
  "NetworkStatus1096677260",
  "NetworkStatus",
  "getConnectionInfo",
  [

  ]
]

위 같은 에러가 발생하면 platform/ios 폴더를 삭제하고, plugin/ios.json 파일도 삭제한다.

그리고 다시 빌드

센차 터치 2.4.x 와 크롬 버전 43과 충돌 문제

아…버그 인줄 모르고 내 잘못인가 하고 열심히 뒤지다가 우연히 문서를 찾아서 버그임을 알았다 ㅠ_ㅠ

삽질한 내 시간 돌려줘 ㅠ_ㅠ;; 흑흑;;

나는 최대한 외부 라이브러리나 프로그램을 의심하지 않는(외국제품에한해) 주의라서…

이렇게 외부 라이브러리에 문제가 있으면 찾는데 오래걸린다…

http://forum.sencha.or.kr/t/painted-chrome-43-broke-sencha/320

https://www.google.co.kr/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&ved=0CBsQFjAAahUKEwiCiP2l0tjGAhWEUqYKHbPADBw&url=http%3A%2F%2Fwww.ladysign-apps.com%2Fdeveloper%2Fchrome-43-breaks-sencha-touch-modern-toolkit-and-how-to-fix-it%2F&ei=zvajVYLpOYSlmQWzgbPgAQ&usg=AFQjCNFmpuv1-e5_RMtmauWdYC6ohU6Suw&bvm=bv.97653015,d.dGY

The Chrome 43 Update Broke Sencha Touch Apps, Here’s How to Fix It