2019/07/24 - [개발/ionic2, Angular] - ionic에서 모바일 접근성 적용하기 (1) : toast

↑위 글과 연결된 글입니다.

이전에 설명했던 ionic-angular http의 문제를 수정하는 법을 작성하겠다.

원인은 인증서 문제라면서 앱에 인증서를 고정하라는 답변을 발견하였다.

하지만 native 소스를 직접 건드리는 것은 좋은 방법이 아닌 것 같아 더 찾아본 결과, 

가장 효율적으로 보이는 https release error 수정하는 법은 다음과 같다.

(ionic-angular http를 이미 사용하고 있다고 가정하고 코드를 작성하였다)

2019/01/15 - [개발/ionic2, Angular] - Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response. error 해결법

그리고 위 포스팅에서 쓴 것과 달리 간혹 핸드폰에서도 CORS 오류가 나는 현상을 발견하였다.

이 문제도 아래 코드로 해결되는 것을 확인하였다. (디바이스에서 약간 디버깅이 어렵다는 것 말고는 여러모로 이득이다)

=> https://로 시작하는 URI를 제대로 동작시키지 못하는 이유는 서버에서 SSL을 제대로 적용 못해서였고 서버에서 제대로 적용해주면 ionic-angular http를 사용해도 apk를 release 했을 때 제대로 동작함을 확인했음

비슷한 이유로 CORS 오류도 서버 문제일 가능성이 높음

디버깅이 어려우므로 정말 서버를 수정할 수 없는 경우 이외엔 아래의 소스를 사용하지 않을 것 같음

그래도 필요한 경우가 생길 수도 있으니 소스는 삭제하지 아니함 (2020. 09. 03)

참고 : forum.ionicframework.com/t/ionic-native-http-ngx-v-s-angular-common-http-which-should-be-used-in-an-ionic4-app/169629/8

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