물에 살고싶은 개발자

[React-Native] Network request failed 오류를 만났을때 대처법 본문

React-Native

[React-Native] Network request failed 오류를 만났을때 대처법

돼지사랑 2019. 9. 9. 13:30


RN으로 작업을 하다보면 fetch 함수로 보통 api 호출을 하게 된다.(다른 라이브러리쓴다고 뭐라하긔 없긔)


그러다보면 다양한 오류로 인해서 Network request failed 이라는 오류문구를 보게 될것이다.


이 오류에는 원인이 다양한데, 결론부터 얘기하면 크게 3가지다.


1. URL 잘못입력한 경우 

내가 써둔 이 포스팅을 참고하자.


2. 서버 보안 문제

이 경우는 해결법이 너무 다양하다. 때문에 내가 겪었던, 알고있는 해결법만 적겠다.

원인이 다른경우는 다른글을 찾아보시라 ~_~ 


이 글을 읽는 사람이 만약 서버환경이 AWS이고, AWS의 초보인 경우 해당될 수 있다.

인스턴스 생성 후 주의점을 써둔 글에 3번에 해당하는 문제인데, 저 글에선 putty같은 SSH 접속에 해당하는 얘기만 써놨지만, 

근본적으로는 같다. AWS의 보안그룹에서 특정 포트나 아이피, 프로토콜을 열어주지 않았기 때문이다. 

보안그룹에 가서 인바운드 아웃바운드 설정으로 해결해주자


3. 클리어텍스트 트래픽 문제 

이 경우는 좀 생소할것이다. 꼭 RN뿐만 아니고 안드로이드로 API를 호출한다면 한번쯤 만날법한 이슈인데,

복잡하게 설명하면 오지게 복잡해지니까, 그냥 안드로이드 네트워크 보안관련 이슈라고 생각하면된다.

해결법은 의외로 심플하다. 매니패스트 파일에 설정코드를 추가해주면 해결된다.


방법은 크게 3가지이다.

1. res / xml / network_security_config.xml 파일 작성


res / xml / network_security_config.xml -> 해당 경로에 파일을 생성하고 아래 코드를 입력

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">Your URL(ex: 127.0.0.1)</domain>
    </domain-config>
</network-security-config>


매니페스트 파일에서 옵션 추가

<?xml version="1.0" encoding="utf-8"?>
<manifest ...>
    <uses-permission android:name="android.permission.INTERNET" />
    <application
        ...
        android:networkSecurityConfig="@xml/network_security_config"
        ...>
        ...
    </application>
</manifest>


2. 매니패스트파일에 <application> 태그 내에 옵션 추가

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

3. 아예 <manifest >단에 옵션 추가 

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

출처 : 스택오버플로우


위 방법대로 하면 셋중하나의 방법으로 해결 될 것이다.




위에서 얘기한 세가지 외에도 여러가지 이유들이 있겠지만, 내가 겪은것위주로 글을 썻기때문에 태클은 ㄴㄴ해주고

더 다양한 원인에 대해선 댓글에 적어주면 글에도 추가하겠다.


위의 경우가 아니라면 아마도 서버에는 접속이 됏는데 다른 이유로 결과가 안왔거나 하는 경우일 가능성이 있다.

그러니 서버단에서 접속을 했는지 체크를 먼저 해보고, 서버에는 접속한 흔적이 없는데 오류가 나는건 아닌지 확인하자.



Comments