[React Native] fetch 사용 시 안드로이드 localhost에서 "Network request failed" 해결법

React Native를 이용하여 안드로이드 앱 개발을 하던 중 안드로이드 에뮬레이터를 실행하고

fetch 함수를 사용하여 api호출을 하고 실행시켜 봤더니 Network request failed라는 오류가 떴다.

 

혹시나 싶어 https든 http든 아무 사이트들에 요청을 시도해봤는데 전부 response가 잘 온다.

오직 localhost만 문제가 발생한다.

 

문제 해결을 위해 다음과 같은 방법들을 시도해 보았다.

 

1. localhost -> ip주소

fetch의 url을 localhost가 아닌 127.0.0.1로 변경한다.

function getExample() {
  return fetch('http://127.0.0.1:4000/users', {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
    },
  }).then(data => data.text());
}

 

2. 클리어텍스트 트래픽

이러한 문제의 대부분은 이것을 통해 해결된다고 한다.

프로젝트 내에서 android/app/src/main/AndroidManifest.xml 파일의 다음과 같은 위치에

android:usesCleartextTraffic="true"

를 삽입한다.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.planit">
    <uses-permission android:name="android.permission.INTERNET" />
    <application
    ...
    android:usesCleartextTraffic="true"
    ...
    >
	...
    </application>
</manifest>

 

3. adb reverse 커맨드를 통해 포트 번호 매핑

출처 : https://stackoverflow.com/questions/33704130/react-native-android-fetch-failing-on-connection-to-local-api

React Native Android Fetch failing on connection to local API

결국엔 이 방법으로 문제를 해결했다.

궁극적인 해결법은 아닌듯 하지만, 로컬호스트로 임시 서버를 쓸 때만이라도 사용할 수 있는 해결법일것 같다.

로컬 서버 포트를 매핑한다.

 

(예시) 로컬호스트 서버의 포트가 4000, 안드로이드 에뮬레이터의 포트번호가 8081일 경우

 

1. react-native run-android 로 에뮬레이터를 실행시킨다.

2. 에뮬레이터가 실행된 상태로 터미널에 다음과 같은 명령어를 입력한다. 

adb -s 에뮬레이터이름 reverse tcp:포트번호 tcp:포트번호

(예시)

adb -s emulator-5554 reverse tcp:4000 tcp:4000

현재 에뮬레이터에 로컬호스트 서버의 포트번호 4000이 매핑되었다!

성공적이다

에뮬레이터를 재실행할 때마다 이 방법을 반복해야 하지만,

Network request failed 상태에 멈춰있는것 보다야.....ㅎㅎㅎ

 

조금 더 근본적인 해결 방법이 있을지 찾아봐야겠다.