인프런 커뮤니티 질문&답변
작성한 질문수
[안드로이드] 실 기기로 axios call이 실행이 안 되는 경우 해결책
해결된 질문
작성
·
1.2K
0
ㅁ 문제점
- Physical Device를 케이블로 연결한 후, 실제 ip 주소를 dotenv에 입력했는데 axios가 작동을 안 함.
- axios.post 후 response를 console.log 할 시 "undefined"가 뜸
ㅁ 해결책 1 - 내부 ip 주소와 외부 ip 주소 각각 시도하기
저 같은 경우는 맥북 m1 pro를 쓰고 있는데, 네이버에서 검색한 ip 주소(외부 ip 주소)는 작동하지 않았습니다.
그래서 192나 128로 시작하는 내부 ip 주소를 이용하니 정상 작동했습니다.
** 관련 내용은 강사님과 나눈 댓글 등을 참조해주시면 됩니다.
ㅁ 해결책 2 - 로컬 서버와 실 기기의 포트를 연결하는 방법
ip주소를 입력하는 방식으로도 해결이 안 되면, 맥북의 로컬 서버를 케이블로 연결된 디바이스로 연결하는 방식으로 진행할 수 있습니다.
1 - MainApplication.java에서 Flipper 관련 아래 코드 제거(plugin이 간혹 네트워크에 지장을 준다는 이유)
initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
2 - dotenv 파일은 아래와 같이 localhost로 설정을 하고
API_URL=http://localhost:3105
3 - npm run android 후 터미널에
adb devices // adb devices를 통해 <device name> 확인
adb -s <device name> reverse tcp:3105 tcp:3105
위 명령어의 뜻은 첫 "tcp:3105"은 맥북의 로컬 서버이고, 뒤에 있는 "tcp:3105"은 핸드폰의 포트를 연결한다 정도로 이해하면 될 것 같습니다.
아래 링크 참조:
https://velog.io/@adguy/android-avm%EC%97%90%EC%84%9C-axios-%EC%82%AC%EC%9A%A9%EC%8B%9C-network-error
https://jaygould.co.uk/2018-11-07-react-native-connecting-development-server-debugging/
답변 1
1
네네...
일단 계속 안 돼서 아래 방법들 시도해봤습니다.
1 - MainApplication.java에서 Flipper 관련 아래 코드 제거(plugin이 간혹 네트워크에 지장을 준다는 이유)
initializeFlipper(this, getReactNativeHost().getReactInstanceManager());** 제가 소개한 workaround를 시도할 때도 initializeFlipper를 안 하면 axios가 작동하지 않더라구요..
2 - AndroidManifest.xml 수정 및 xml/network_security_config 설정
AndroidManifest.xml
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> // 코드 추가
<application
android:usesCleartextTraffic="true" // 새로 추가
android:name=".MainApplication"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:allowBackup="false"
android:theme="@style/AppTheme"
android:networkSecurityConfig="@xml/network_security_config"> //새로 추가 -> 로컬 호스트 및 ip 주소들 설정
main/res/xml/network_security_config.xml
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
<domain-config cleartextTrafficPermitted="true">
<!-- Without localhost setting, it's unable to connect metro with app. -->
<domain includeSubdomains="true">127.0.0.1</domain>
<!-- For physical phone, 10.0.0.1 is the address connect to computer -->
<domain includeSubdomains="true">10.0.0.1</domain>
<domain includeSubdomains="true">58.120.200.21</domain> // 카페에서 작업 중인데, 카페 아이피 주소입니다
<!-- For AVD, 10.0.2.2 is the address connect to computer -->
<domain includeSubdomains="true">localhost</domain>
</domain-config>
</network-security-config>
** 위에는 저도 링크를 찾지 못 하고 있는데, 어떤 아티클에서 저런 식으로 아이피 주소를 차라리 명시해놓으면, 인식할 수도 있다고 하여 시도해보았습니다.
** 혹시 제가 adb reverse를 하면서 연결에 지장을 줬나 싶어서, adb kill이나 adb disconnect 시도 후에도 안 되고 있네요 TT
핸드폰 브라우저에서는 58.120.200.21:3105할 때 응답 오나요? networkSecurityConfig는 사실 없어도 되긴 합니다. 카페 아이피라서 포트를 함부로 못 여는 상황일 수 있습니다.
제로초님, 이 모든게 제 불찰이었습니다 TT...
네이버로 검색된 ip 주소(외부 ip 주소) 말고, 192나 128로 시작하는 내부 ip 주소를 사용하니깐 되네요...
** 아침부터 안 돼서... 이제 그만 포기하려고 했는데 끝까지 도와주셔서 넘 감사드립니당 🙏
답변 감사드립니다 강사님!
이게, 저도 이해가 안 되는게 에뮬레이터에서는 정상 작동하고 있고,
실기기와 맥북에서 ip 주소를 확인해도 같은데,
axios.post를 할 때 response가 undefined가 뜨고 있어서요 TT...
(실기기가 공기기이기는 한데, 이 문제는 아니겠죠?)
config.url하고 resonse를 콘솔로 확인해보면 아래 같이 나오고 있습니다 TT...
DEBUG: api url is http://<내 아이피 주소>:3105 DEBUG: response is undefined** 연결이 안 되는 문제는 제가 좀더 시도해보고, 원인 발견하면 업데이트 해놓겠습니다.