React-Native Network Request Failed Error [Android]

 

리액트 네이티브로 만든 안드로이드 어플리케이션에서 Rest 통신을 할 일이 생겼다.

다음과 같이 AndroidManifest.xml에서 Internet 퍼미션을 주고

<uses-permission android:name="android.permission.INTERNET" />

간단하게 fetch를 사용해서 요청하려고 했지만 Network Request failed 오류가 발생했다.

const getMessageFromApi = () => {
        return fetch('http://127.0.0.1:5000/message', {method:'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
          },
        body : JSON.stringify({message : dummyVal})
    })
        .then((response) => response.json())
        .then((json) => {
            alert(json.message)
            return json.message})
        .catch((error) => {
            alert(error.message);
        });
    }

인터넷에 검색해보니, API 28버전부터는 안드로이드에서 보안상의 문제로 http 통신이 안된다는 것이었다.

그래서 https로 통신을 해야 하는데.. 간단하게 플라스크로 만든 서버를 고치는건 잘 모르겠어서, 우선은 안드로이드를 고쳐보기로 했다.

 

해결하기 위한 다양한 방법이 있다.

우선 모든 http 통신을 허용하는 방법으로 AndroidManifest.xml에서 application에 다음을 추가한다.

android:usesCleartextTraffic="true"

 

아니면 내가 사용하는 특정 주소에서만 http 통신을 허용하는 방법도 있다.

res/xml/netwrok_security_config.xml을 만들어 다음 코드를 추가한다.

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">원하는 주소!!!!!</domain>
    </domain-config>
</network-security-config>

그리고 AndroidManifest.xml에 다음과 같이 xml 파일을 등록해준다.

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

 

아니면 targetSandboxVersion을 1로 수정하는 방법도 있다고 한다.

<?xml version="1.0" encoding="utf-8"?>
<manifest android:targetSandboxVersion="1">
    <uses-permission android:name="android.permission.INTERNET" />
    ...
</manifest>

나는 이중 첫 번째 방법을 사용했지만 그래도 에러가 발생한다.

 

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

'http://127.0.0.1:5000/message' -> 'http://10.0.2.2:5000/message'

 

바꾸니 잘 동작한다!

 

전문가가 아니라 정확하지 않은 지식이 담겨있을 수 있습니다.
언제든지 댓글로 의견을 남겨주세요!