Axios Network Error

[flowersayo]

상황

Axios 요청을 보내면 Network Error 500 이 발생합니다.
찾아보니 React-native 에서 axios 를 사용할때 종종 있던 이슈같습니다..!!

[flowersayo]

[React Native] 안드로이드에서 Axios Network 에러 해결 방법

https://coding-w00se.tistory.com/11

[flowersayo]

2. AndroidManifest.xml에 다음 세가지 항목 추가

-> 해결안됨

[flowersayo]

3. add this uesCleartextTraffic="true" to the AndroidManifest.xml file

android:usesCleartextTraffic="true"

-> 안됨

[flowersayo]

https://stackoverflow.com/questions/59600004/network-error-when-use-axios-in-react-native

[flowersayo]

4.

[flowersayo]

5

[flowersayo]

6.

[flowersayo]

7. solution came from a different source

https://stackoverflow.com/questions/42189301/axios-in-react-native-not-calling-server-in-localhost/53617769#53617769

[flowersayo]

8. 안드로이드 디바이스에는 localhost 개념이 없기때문

This worked for me because I was using my android mobile device to debug the application, The android device doesn't have any idea of the localhost on my computer. So if you are using your android device to debug use IP address instead of using localhost

• 안드로이드 디바이스에서 ip 주소 확인법
  https://moonsu.tistory.com/6

172.30.1.61

[flowersayo]

9

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

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

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

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

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

https://gochibul.tistory.com/5

[flowersayo]

10

https://revs.runtime-revolution.com/connecting-react-native-to-localhost-65e7ddf43d02

[flowersayo]

11.

localhost 변경

react native는 앱을 구현하는 것이기 때문에 애뮬레이터가 필요하다. 하지만 애뮬레이터는 컴퓨터 안에 또 다른 가상 디바이스에서 켜진 것이기 때문에 주소에 localhost로 쓰면 접근할 수 없다. 따라서, localhost 대신 애뮬레이터의 IP주소를 넣어야 한다.

∴ localhost(127.0.0.1):port => 10.0.2.2:port

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

https://velog.io/@psj8532/React-Native-%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%9A%94%EC%B2%AD-%EC%98%A4%EB%A5%98