[RN][Expo] Android 빌드 후 Axios Error:Network Error

 

❗️문제

EAS 내부 빌드하여 iOS와 Android 테스트하던 중, Android에서만 외부 API가 전혀 동작하지 않았다.

( Postman이나 iOS에서는 잘 동작했다.. iOS는 앱 제출 심사도 통과한 상태 )

 

 Sentry.captureException(err) 로 에러 추적한 결과,

https://semi-calories.sentry.io/share/issue/fcbbd537992e4c229cdb3a05d2fec47e/

AxiosError: Network Error

 

이러한 Axios Error: Network Error인것을 발견하였다.

 

 

Android는 API 28 이상인 경우, 암호화되지 않은 일반 텍스트와 같은 HTTP 프로토콜의 요청을 막는다.

이러한 속성은 usesCleartextTraffic인데, API 28 이상인 경우 기본값이 false이다.

CleartextTraffic이란 암호화되지 않은 데이터를 의미한다.

https://developer.android.com/guide/topics/manifest/application-element?hl=ko#usesCleartextTraffic

<application>  |  Android 개발자  |  Android Developers

 

 

💡해결

HTTPS 프로토콜로 변경

HTTP에 데이터 암호화가 추가된 HTTPS 프로토콜로 변경하면,

암호화된 데이터이므로 usesCleartextTraffic가 false여도 동작한다.

 

 

AndroidManifest.xml 에 직접 추가

ios, android 디렉토리가 존재하는 React Native 프로젝트이거나, Expo Bare workflow인 경우 해당한다.

 

AndroidManifest.xml 파일은 Android 시스템이 앱을 설치하고 실행하는 데 필요한 정보를 제공하는 파일이다.

root > android > app > src > main > AndroidManifest.xml

여기에  android:usesCleartextTraffic="true" 속성을 직접 추가하여 일반 텍스트와 같은 HTTP 프로토콜 요청을 허용한다.

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

 

++  npx expo prebuild 를 통해 Bare workflow로 변경하고 AndroidManifest.xml에 직접 추가해도 동작함

 

 

Expo Build Properties 플러그인 사용

ios, android 디렉토리가 존재하지 않는 Expo Managed workflow인 경우 해당한다.

 

Expo Build Properties란, android/gradle.properties 와 ios/Podfile.properties.json의 네이티브 빌드 속성을 구성하는 

구성 플러그인이다.

 

npx expo install expo-build-properties

 

app.config.js 파일은 JavaScript 파일이므로 동적으로 설정을 변경할 수 있다.

단, expo-build-properties는 app.config.js의 동적 구성에 자동으로 쓸 수 없으므로, Expo.config에 직접 추가해야 한다.

// app.json
{
  "expo": {
    // ... other fields
    "plugins": [
      // ... other plugins
      [
        "expo-build-properties",
        {
          "android": {
            "usesCleartextTraffic": true
          }
        }
      ]
    ]
  }
}

해당 설정을 추가하면 빌드 과정중 해당 속성을 포함하여 빌드한다. 따라서 일반 텍스트와 같은 HTTP 프로토콜 요청을 허용할 수 있다.

 

 

++ app.json과 app.config.js

app.json은 정적구성, app.config.js은 동적구성

app.config.js가 존재하는 경우, 동적 구성을 읽는다.

이때 app.json은 ({config}) => ({}) 형식으로 반환되어 정적 구성에 사용할 수 있다.

https://docs.expo.dev/workflow/configuration/

Configure with app config

 

 

 

참고

https://developer.android.com/guide/topics/manifest/application-element?hl=ko#usesCleartextTraffic

https://docs.expo.dev/versions/latest/sdk/build-properties/#pluginconfigtypeandroid

https://stackoverflow.com/questions/45940861/android-8-cleartext-http-traffic-not-permitted

https://github.com/axios/axios/issues/973#issuecomment-528737841