ios 아임포트 설정 이후 네트워크 오류

[Jin-seop]

https://github.com/iamport/iamport-react-native/blob/master/manuals/SETTING.md 위 링크에 나온 ios설정 이후 안드로이드는 문제가 없으나 ios에서는 기존에 만들어 놓은 서버와 연결이 안되는 문제가 있습니다. 현재 제 설정은 다음과 같습니다.

<key>LSApplicationQueriesSchemes</key>
    <array>
        <string>kakao(카카오 해시키있는부분)</string>
        <string>kakaokompassauth</string>
        <string>storykompassauth</string>
        <string>kakaolink</string>
        <string>kakaotalk-5.9.7</string>
        <string>storylink</string>
        <string>fbapi</string>
        <string>fb-messenger-api</string>
        <string>fbauth2</string>
        <string>fbshareextension</string>
        <string>golproscheme</string>

        <string>kftc-bankpay</string> <!-- 계좌이체 -->
        <string>ispmobile</string> <!-- ISP모바일 -->
        <string>itms-apps</string> <!-- 앱스토어 -->
        <string>hdcardappcardansimclick</string> <!-- 현대카드-앱카드 -->
        <string>smhyundaiansimclick</string> <!-- 현대카드-공인인증서 -->
        <string>shinhan-sr-ansimclick</string> <!-- 신한카드-앱카드 -->
        <string>smshinhanansimclick</string> <!-- 신한카드-공인인증서 -->
        <string>kb-acp</string> <!-- 국민카드-앱카드 -->
        <string>mpocket.online.ansimclick</string> <!-- 삼성카드-앱카드 -->
        <string>ansimclickscard</string> <!-- 삼성카드-온라인결제 -->
        <string>ansimclickipcollect</string> <!-- 삼성카드-온라인결제 -->
        <string>vguardstart</string> <!-- 삼성카드-백신 -->
        <string>samsungpay</string> <!-- 삼성카드-삼성페이 -->
        <string>scardcertiapp</string> <!-- 삼성카드-공인인증서 -->
        <string>lottesmartpay</string> <!-- 롯데카드-모바일결제 -->
        <string>lotteappcard</string> <!-- 롯데카드-앱카드 -->
        <string>cloudpay</string> <!-- 하나카드-앱카드 -->
        <string>nhappcardansimclick</string> <!-- 농협카드-앱카드 -->
        <string>nonghyupcardansimclick</string> <!-- 농협카드-공인인증서 -->
        <string>citispay</string> <!-- 씨티카드-앱카드 -->
        <string>citicardappkr</string> <!-- 씨티카드-공인인증서 -->
        <string>citimobileapp</string> <!-- 씨티카드-간편결제 -->
        <string>kakaotalk</string> <!-- 카카오톡 -->
        <string>payco</string> <!-- 페이코 -->
        <string>lpayapp</string> <!-- 롯데 L페이 -->
        <string>hanamopmoasign</string> <!-- 하나카드 공인인증앱 -->
        <string>wooripay</string> <!-- 우리페이 -->
        <string>nhallonepayansimclick</string> <!-- NH 올원페이 -->
        <string>hanawalletmembers</string> <!-- 하나카드(하나멤버스 월렛) -->
    </array>

<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoadsInWebContent</key>
            <true/>
        <key>NSAllowsArbitraryLoads</key>
            <true/>
        <key>NSExceptionDomains</key>
        <dict>
            <key>localhost</key>
            <dict>
                <key>NSExceptionAllowsInsecureHTTPLoads</key>
                <true/>
            </dict>
        </dict>
    </dict>

[SoleeChoi]

안녕하세요 아임포트 기술지원팀입니다.

"기존에 만들어 놓은 서버와 연결이 안되는 문제"가 발생하신다고 하셨는데, 어떤 문제인지 보다 구체적인 정보가 필요해 보입니다.

귀하의 앱 내에서 귀하의 웹 서버로 HTTP 통신하는 부분이 있을테고 NSExceptionDomains에 localhost가 설정되어 있는 것으로 보아 로컬로 띄운 웹 서버로의 HTTP 통신이 되지 않는다는 말씀인 것 같은데 맞으실까요? 틀리다면 어떤 연결이 어떻게 안된다는 말씀인지 보다 구체적인 설명을 부탁드립니다.

애플 개발자 문서를 보면 NSExceptionDomains값이 설정되어 있는 경우 NSAllowsArbitraryLoads가 무시되기 때문에 영향이라고는 NSAllowsArbitraryLoadsInWebContent값 밖에 없는 것 같은데 해당 값은 아시다시피 웹뷰에서 ATS를 무시하기 위해 사용되기 때문에 아임포트 모듈 사용시 필수적으로 설정되어야 하는 값 입니다.

1. 혹시 귀하의 앱에서 아임포트 모듈외에 웹뷰를 띄우는 부분이 있으신가요?
2. NSAllowsArbitraryLoadsInWebContent값과 NSAllowsArbitraryLoads값을 모두 제거하셨을때는 정상적으로 동작하실까요?

위 내용에 대해 확인 부탁드립니다. 감사합니다.

[Jin-seop]

@SoleeChoi 답변 감사합니다

현재 HTTP통신은 한비로서버에 띄워 놓은 상태입니다. 아임포트 설정을 적용한 이후로 ios만 한비로 서버와 통신이 되지 않는 문제가 발생했습니다. 1.아임포트 이외에 autoheight-webview를 사용했습니다. 2.NSAllowsArbitraryLoadsInWebContent값과 NSAllowsArbitraryLoads값을 모두 제거 후에도 같은 오류가 발생합니다.

현재 사용중인 패키지입니다.

"dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.7.4",
    "@babel/plugin-proposal-decorators": "^7.7.4",
    "@expo/react-native-action-sheet": "3.8.0",
    "@react-native-community/async-storage": "^1.7.1",
    "@react-native-community/cli": "^3.1.0",
    "@react-native-community/datetimepicker": "2.4.0",
    "@react-native-community/geolocation": "^2.0.2",
    "@react-native-community/google-signin": "^3.0.4",
    "@react-native-community/toolbar-android": "0.1.0-rc.2",
    "@react-native-community/viewpager": "^3.3.0",
    "@react-native-seoul/kakao-login": "^2.1.2",
    "accordion-collapse-react-native": "^0.2.6",
    "axios": "^0.19.2",
    "babel-eslint": "10.1.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "buffer": "6.0.3",
    "deprecated-react-native-listview": "0.0.6",
    "eslint-plugin-prettier": "3.1.4",
    "hangul-js": "0.2.6",
    "mobx": "^5.15.0",
    "mobx-react": "^6.1.4",
    "moment": "^2.24.0",
    "moment-timezone": "^0.5.27",
    "prettier": "2.1.2",
    "react": "16.9.0",
    "react-chat-elements": "^10.8.0",
    "react-native": "0.61.5",
    "react-native-autoheight-webview": "^1.4.1",
    "react-native-countdown-component": "^2.6.0",
    "react-native-device-info": "^5.4.0",
    "react-native-drawer": "^2.5.1",
    "react-native-elements": "^1.2.7",
    "react-native-emoji": "^1.8.0",
    "react-native-emoji-selector": "^0.1.8",
    "react-native-fast-image": "^7.0.2",
    "react-native-fbsdk": "^1.1.1",
    "react-native-firebase": "^5.6.0",
    "react-native-fix-image": "2.0.1",
    "react-native-geocoding": "^0.4.0",
    "react-native-gesture-handler": "^1.5.2",
    "react-native-gifted-chat": "^0.13.0",
    "react-native-image-crop-picker": "^0.28.0",
    "react-native-image-grid": "^1.0.0",
    "react-native-image-picker": "2.3.1",
    "react-native-image-resizer": "^1.2.0",
    "react-native-indicators": "^0.17.0",
    "react-native-iphone-x-helper": "^1.2.1",
    "react-native-keyboard-aware-scroll-view": "0.9.1",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-maps": "0.26.1",
    "react-native-material-dropdown": "^0.11.1",
    "react-native-modal-datetime-picker": "8.7.1",
    "react-native-range-datepicker": "^1.9.1",
    "react-native-reanimated": "^1.4.0",
    "react-native-router-flux": "^4.0.6",
    "react-native-screens": "^2.0.0-beta.2",
    "react-native-share": "4.1.0",
    "react-native-splash-screen": "^3.2.0",
    "react-native-status-bar-height": "^2.4.0",
    "react-native-swiper": "^1.6.0-nightly.5",
    "react-native-tab-view": "^2.11.0",
    "react-native-table-component": "1.2.1",
    "react-native-uuid": "^1.4.9",
    "react-native-uuid-generator": "^6.1.1",
    "react-native-vector-icons": "^6.6.0",
    "react-native-webview": "^8.0.4",
    "reanimated-bottom-sheet": "1.0.0-alpha.20",
    "socket.io-client": "^2.3.0",
    "sprintf-js": "1.1.2",
    "uuid": "7.0.3"
  },
  "devDependencies": {
    "@babel/core": "7.7.5",
    "@babel/runtime": "7.7.6",
    "@react-native-community/eslint-config": "0.0.5",
    "babel-jest": "24.9.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "babel-preset-react-native-stage-0": "^1.0.1",
    "eslint": "6.7.2",
    "jest": "24.9.0",
    "jetifier": "^1.6.5",
    "metro-react-native-babel-preset": "0.56.3",
    "react-native-infinite-flatlist-patch": "1.0.6",
    "react-test-renderer": "16.9.0"
  },
  "jest": {
    "preset": "react-native"
  }

[SoleeChoi]

안녕하세요 아임포트 기술지원팀입니다.

빠른 확인 감사드립니다.

아임포트 모듈이 요구하는 IOS 설정은 아래와 같이 크게 3가지인데요,

1. URL Scheme 등록
2. LSApplicationQueriesSchemes에 외부 앱 리스트 추가
3. App Transport Security 설정

HTTP 통신에 영향을 미치는 것은 3번이기 때문에 3번을 무시(NSAllowsArbitraryLoadsInWebContent값과 NSAllowsArbitraryLoads값 제거)했을때도 여전히 안된다는 것은 조금 이상한 것 같은데, 어떤 설정이 영향을 미치는 것인지 보다 정확한 확인을 위해 1번 2번 3번을 각각 순서대로 제거해보시고 언제 정상적으로 동작하는지 확인 가능하실까요? 만약 3개를 다 원래 값으로 롤백 하더라도 정상 동작하지 않는다면 iamport-react-native 모듈이 아닌 다른 부분에 이슈일 수 있으니 다소 번거로우시겠지만 확인 부탁드립니다.

감사합니다.

[Jin-seop]

@SoleeChoi 빠른 답변 감사합니다 현재 코드 하나하나 확인해 본 결과

<key>NSAllowsArbitraryLoadsInWebContent</key>
<true/>

위 코드를 삭제후 정상 작동을 하였습니다 . 하지만

<key>NSAllowsArbitraryLoadsInWebContent</key>
<true/>
<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>

위 두 코드를 삭제하면 다시 오류가 발생했습니다.

[SoleeChoi]

안녕하세요 아임포트 기술지원팀입니다.

확인 감사드립니다.

NSExceptionAllowsInsecureHTTPLoads값은 귀하께서 설정하신 값이고 해당 값(더 정확히 말하면 NSExceptionDomains)을 설정하게 되면 NSAllowsArbitraryLoads이 무시되기 때문에 문제는 NSAllowsArbitraryLoadsInWebContent일 것이라고 예상은 했습니다만 사실이었군요.

귀하의 웹서버로 HTTP 통신하는 부분이 네이티브 단에서 하는 것이 아니고 웹뷰에서 하기 때문에 해당 값이 영향을 받는 것으로 추정됩니다.

1. 혹시 iamport-react-native 모듈로 연동하시려는 서비스가 어떤 것일까요?

• PG사의 종류 및 결제 수단
• 본인인증 서비스 사용 여부

iamport-react-native 모듈은 아임포트가 제공하는 모든 서비스(PG사, 결제 수단 등)가 동작하도록 구성되어 있기 때문에 꼭 모든 상황에서 NSAllowsArbitraryLoadsInWebContent값이 필수가 아닐 수 있기 때문에 귀하가 사용하시고자 하는 서비스에서도 NSAllowsArbitraryLoadsInWebContent값이 필수인지 확인해 볼 필요가 있을 것 같아 문의 드립니다.

2. 또한 귀하의 웹서버 설정도 영향이 있을 것 같은데 2-1) 앞서 "연결이 되지 않는다"고 말씀하신 부분이 해당 HTTP 리퀘스트 호출자체에 실패(Canceled)했다는 말씀이실까요 아니면 웹 서버의 해당 endpoint로 도달은 했는데 실패 응답 코드를(4XX, 5XX) 받으셨다는 말씀일까요? 2-2 ) 해당 endpoint 전체 URL을 알 수 있을까요?

감사합니다.

[Jin-seop]

@SoleeChoi 빠른 답변 감사합니다. 1.PG사는 이니시스,본인인증은 kcp를 이용합니다.

2-1)현재 호출 자체를 실패합니다.아래는 해당 요청 오류 메시지입니다.(안드로이드에서는 정상작동합니다.)

Possible Unhandled Promise Rejection (id: 0):
TypeError: undefined is not an object (evaluating 'response.list_items')
_callee$@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:186123:32
tryCatch@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:25500:23
invoke@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:25673:32
tryCatch@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:25500:23
invoke@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:25573:30
http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:25583:21
tryCallOne@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:26912:16
http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:27013:27
_callTimer@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:30467:17
_callImmediatesPass@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:30503:19
callImmediates@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:30722:33
callImmediates@[native code]
__callImmediates@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:2518:35
http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:2295:34
__guard@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:2501:15
flushedQueue@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:2294:21
flushedQueue@[native code]
callFunctionReturnFlushedQueue@[native code]

2-2)endpoint는 아래와 같습니다. http://golpro.co.kr

[SoleeChoi]

안녕하세요 아임포트 기술지원팀입니다.

에러 내용을 보면 HTTP 리퀘스트는 호출됐으나 response값이 없어서 response.list_items시 스크립트 에러가 발생한 것으로 보입니다. 물론 response값이 없는 것 자체가 말씀하신대로 NSAllowsArbitraryLoadsInWebContent값이 원인인 것 같습니다만...

1. 혹시 저희 support 이메일(support@iamport.kr)로 귀하의 프로젝트를 압축해 보내주실 수 있으실까요? 저희가 직접 디버깅 해보면서 해결 방법을 찾아보고자 합니다. 만약 프로젝트 전체 공개가 부담스러우시다면, 디버깅 가능한 코드만 뽑아서 보내주셔도 됩니다.

2. 프로젝트를 보내주실때는 용량을 줄이기 위해 node_modules 폴더는 삭제하고 보내주시길 바랍니다.

3. 또한 문제가 발생하고 있는 HTTP 리퀘스트를 호출하는 방법(어떤 페이지에서 어떤 버튼을 눌러야 하는지 등)을 안내주시면 디버깅에 원활할 것 같습니다.

감사합니다.

[Jin-seop]

@SoleeChoi 답변감사합니다.

전체 코드를 압축해서 보내드리겠습니다.

npm run ios를 하면 첫페이지부터 오류가 발생합니다.

[SoleeChoi]

안녕하세요 아임포트 기술지원팀입니다.

보내주신 프로젝트를 압축 해제후 빌드해 여러가지 테스트를 해 보았는데요 일단은 src/Screens/Home/_Preview_Product.js의 30번째 줄에서 Service.getSpecialList를 호출하면

src/API/Service.js 파일의 172번째 줄이 호출되는데 이 HTTP 리퀘스트에 실패하면서 180번째 줄을 타게 되고

src/Screens/Home/_Preview_Product.js의 30번째 줄에서 response값이 undefined로 찍히기 때문에 31번째줄의 response.list_items에서 스크립트 에러가 나고 있는 상황입니다.

말씀해주신대로 info.plist 파일의 속성에 아임포트가 요구하는 속성들을 모두 제거하고 아래와 같이 설정 후 확인해 보았는데

여전히 해당 리퀘스트는 Network request failed 사유로 실패하고 있는 상황입니다. (앱을 완전히 지우고 Clean Build Folder 후 다시 빌드 및 설치 하고 확인 완료)

앞서 안내주셨을때는 위와 같이 info.plist 파일이 설정되어 있으면 잘 됐다고 말씀하신 것 같은데 혹시 정상적으로 동작할때의 NSAppTransportSecurity 설정 값 다시 확인 가능하실까요?

감사합니다.

[Jin-seop]

@SoleeChoi 빠른 확인 감사합니다 !!

<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>

위 코드만 삭제한 후에는 정상적으로 잘 동작했습니다. (모두 제거하면 동작이 안됬었습니다),현재도 기능 개발을 할 경우 위 코드만 삭제한 후 프로젝트 기능 구현을 하고 있습니다. (아임포트 라이브러리는 아직 사용 못했습니다 ㅜㅜ)

[SoleeChoi]

안녕하세요 아임포트 기술지원팀입니다.

아!? 아까는 NSAllowsArbitraryLoadsInWebContent값을 삭제하시면 정상 동작하신다고 하셔서... 그러시면 해당 값은 삭제하셔도 될 것 같습니다.

저희가 추가를 요구한 값은 NSAllowsArbitraryLoadsInWebContent값과 NSAllowsArbitraryLoads값이기 때문에 NSExceptionAllowsInsecureHTTPLoads이 값은 제거해주셔도 아임포트를 사용하시는데 문제 없으십니다.

감사합니다.

[Jin-seop]

@SoleeChoi 다행이네요 빠른답변 감사합니다! 이슈는 닫겠습니다