ionic2, Angular에서 https release error, CORS(Access-Control-Allow-Headers) error 해결법 개발/ionic2, Angular2019. 7. 25. 12:43
2019/07/24 - [개발/ionic2, Angular] - ionic에서 모바일 접근성 적용하기 (1) : toast
ionic에서 모바일 접근성 적용하기 (1) : toast
최근 ionic앱에 모바일 접근성(Mobile Accessibility)을 적용할 일이 생겼다. ionic에는 크게 ionic-angular, ionic-native로 나뉘어 지는데 플러그인들이 많은데 toast도 그중 하나다. 나는 평소 ionic을 테스트..
risha-lee.tistory.com
↑위 글과 연결된 글입니다.
이전에 설명했던 ionic-angular http의 문제를 수정하는 법을 작성하겠다.
원인은 인증서 문제라면서 앱에 인증서를 고정하라는 답변을 발견하였다.
하지만 native 소스를 직접 건드리는 것은 좋은 방법이 아닌 것 같아 더 찾아본 결과,
가장 효율적으로 보이는 https release error 수정하는 법은 다음과 같다.
(ionic-angular http를 이미 사용하고 있다고 가정하고 코드를 작성하였다)
그리고 위 포스팅에서 쓴 것과 달리 간혹 핸드폰에서도 CORS 오류가 나는 현상을 발견하였다.
이 문제도 아래 코드로 해결되는 것을 확인하였다. (디바이스에서 약간 디버깅이 어렵다는 것 말고는 여러모로 이득이다)
=> https://로 시작하는 URI를 제대로 동작시키지 못하는 이유는 서버에서 SSL을 제대로 적용 못해서였고 서버에서 제대로 적용해주면 ionic-angular http를 사용해도 apk를 release 했을 때 제대로 동작함을 확인했음
비슷한 이유로 CORS 오류도 서버 문제일 가능성이 높음
디버깅이 어려우므로 정말 서버를 수정할 수 없는 경우 이외엔 아래의 소스를 사용하지 않을 것 같음
그래도 필요한 경우가 생길 수도 있으니 소스는 삭제하지 아니함 (2020. 09. 03)
1. ionic-native http를 설치한다.
$ ionic cordova plugin add cordova-plugin-advanced-http
$ npm install --save @ionic-native/http
2. app.module.ts에서 ionic-native http를 providers에 넣는다.
import { HTTP } from '@ionic-native/http';
@NgModule({
.....
providers: [
.....
HTTP
]
})
3. ts 파일을 수정한다.
import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { Http } from '@angular/http';
import { HTTP } from '@ionic-native/http';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
url:string = "your_server_url";
page_index: number = 1;
constructor(public platform: Platform,
public http: Http,
public n_http: HTTP) {
this.goGetNoti();
}
goGetNoti() {
var param = "?page_index=" + this.page_index;
this.getNoti(param).then(data => {
console.log("getNoti", data);
var _data:any = data;
if (_data.isOk == 'Y') {
// success
} else {
// server error
}
}).catch(error => {
console.log("Error", error);
});
}
public getNoti(param: string) {
if (this.platform.is('cordova') == false){
return new Promise((resolve, reject) => {
this.http.get(url+'/v1/noti' + param).timeout(5000).subscribe(res => {
resolve(res.json());
}, (err) => {
reject(err);
});
});
} else {
return new Promise((resolve, reject) => {
this.n_http.setSSLCertMode('nocheck');
this.n_http.setRequestTimeout(5);
this.n_http.get(url+'/v1/noti' + param, {}, {}).then(res =>{
resolve(JSON.parse(res.data));
}).catch(err =>{
reject(err);
});
});
}
}
}
(보통 getNoti와 같이 동작하는 함수는 다른 ts에 넣고 사용하기 때문에 getNoti와 goGetNoti로 분리하였다)
this.n_http.setSSLCertMode('nocheck'); 이 부분이 SSL 확인하지 않게 해주는 부분인듯하다.
찾아보았으나 아쉽게도 ionic-angular http에서는 ionic-native http처럼 SSL 확인을 하지 않아도 되는 기능이 없다.
그래서 앞으로 http onic-angular, ionic-native 분기 코딩은 계속될 거 같다.
보안 문제를 살짝 생각해봤는데 보통 서버도 같이 개발해서
이미 인증된 서버이므로 위와 같은 방법을 써도 문제는 없을 것 같다.
=> 위와 같은 이유로 취소선 추가
참고 : https://stackoverflow.com/questions/44833534/http-requests-fails-only-while-releasing-android-apk
https://forum.ionicframework.com/t/https-post-requests-not-working-in-release-build/154099/3
'개발 > ionic2, Angular' 카테고리의 다른 글
| ionic2, Angular에서 Voice Over/Voice Assistant/Talk Back이 켜져 있을 때 원하는 문장을 읽어주는 법 (모바일 접근성) (0) | 2019.09.18 |
|---|---|
| ionic2, Angular에서 keycloak token 받아오는 법 (0) | 2019.07.25 |
| ionic2, Angular에서 모바일 접근성 적용하기 (4) : ion-radio (0) | 2019.07.25 |
| ionic2, Angular에서 모바일 접근성 적용하기 (3) : ion-select ② (0) | 2019.07.25 |
| ionic2, Angular에서 모바일 접근성 적용하기 (2) : ion-select ① (0) | 2019.07.25 |
