React-Native Network Request Failed Error 해결법

Daeyoung Nam·2021년 10월 30일
1

프로젝트

목록 보기
12/16

fetch를 이용하여 local API 서버에 요청을 보냈는데
network request failed error가 떴었다.
물론 iOS는 잘 동작했다.

현재 RN 버전

0.66.1

해결법

android에서 localhost로 request를 보내면 request failed error가 떴었다.

첫번째로 찾은 해결법은 network_security_config를 추가하고 AndroidManifest.xml에서 다음과같이 바꿔주는 것이었다.

먼저 android/app/src/main/res 경로에 xml 폴더를 하나 생성하고 network_security_config.xml을 추가했다.

그리고 아래와 같이 작성하였다.

network_security_config.xml

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">localhost</domain>
        <domain includeSubdomains="true">127.0.0.1</domain>
    </domain-config>
</network-security-config>

그리고 AndroidManifest.xml에 다음과 같이 추가했다.

AndroidManifest.xml 중 일부

<application
			...
      android.networkSecurityConfig="@xml/network_security_config"
			...
/>

network_security_config.xml에는 해당하는 도메인들의 대해 http요청을 허용하는 설정이다.

이 외에도 다른 방법들이 있었지만 환경이 바뀔때마다 이슈가 생길 수 있는 설정들이라 적용하지 않았다.

하지만 이와같이 설정하고 빌드를 다시해도 이슈가 해결이 안됬었는데,
조금더 구글링을 해보니 다음과 같은 글이 있었다.

StackOverflow를 찾아보니, 안드로이드를 AVD를 통해 사용하는 경우, Localhost의 주소를 10.0.2.2로 바꿔줘야 한다는 것이었다...

그렇다면 API 주소를 플랫폼 별로 대응할 수 있게 만들어야한다.

import { Platform } from "react-native";

const _ANDROID_AVD_API_HOST = 'http://10.0.2.2:8080';
const _IOS_API_HOST = 'http://localhost:8080';

export default getAPIHost = () => {
    if(Platform.OS === 'ios') {
        return _IOS_API_HOST;
    }
    else if(Platform.OS === 'android') {
        return _ANDROID_AVD_API_HOST;
    }
    else {
        throw "Platform not supported";
    }
}

이와같이 모듈로 만들었고 필요한곳에서 getAPIHost() 를 호출하여 사용하니 작동이 되었다!

profile
내가 짠 코드가 제일 깔끔해야하고 내가 만든 서버는 제일 탄탄해야한다 .. 😎

0개의 댓글