[RN][EXPO] iOS Axios Error: Network Error

 

❗️ 문제

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

( Postman이나 Android에서는 잘 동작했다. )

 

Sentry로 에러 추적 결과,

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

AxiosError: Network Error

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

Android의 경우와 비슷하기에 iOS의 HTTP 보안 정책을 확인해보았다.

 

iOS는 iOS 9.0 또는 macOS 10.11 SDK 이상인 경우,

네트워크 보안 기능인 ATS(App Transport Security)를 기본적으로 작동시킨다.

이는 최소 보안 요구 사항을 충족하지 않는 연결을 차단하는데, HTTP 통신도 이러한 경우에 해당한다.

 

 

 npx expo run:ios 해서 ios > [프로젝트명] > Info.plist 파일 확인하니

이렇게 NSAllowsAribitaryLoads의 기본값이 false로 되어있다.

 

 

 

💡 해결

HTTPS 프로토콜로 변경

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

보안 요구 사항을 충족하므로 동작한다.

 

 

Info.plist에 직접 추가

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

 

info.plist 파일은 iOS 앱의 설정과 속성을 정의하는데 사용되는 키-값 쌍의 딕셔너리이다.

이 파일에 예외를 추가하여 일부 ATS 요구 사항을 완화할 수 있다.

<key>NSAppTransportSecurity</key>
	<dict>
		<key>NSAllowsArbitraryLoads</key>
		<true/>
		<key>NSExceptionDomains</key>
		<dict>
			<key>localhost</key>
			<dict>
				<key>NSExceptionAllowsInsecureHTTPLoads</key>
				<true/>
			</dict>
		</dict>
	</dict>

• NSAppTransportSecurity
  : HTTP 연결에 대한 기본 보안 사항에 대한 내용
• NSAllowsArbitraryLoads
  : 모든 네트워크 연결에 대해 ATS(앱 전송 보안) 제한이 비활성화되어 있는지 여부
• NSExceptionDomains
  : 작성된 도메인에 대한 사용자 정의 ATS(앱 전송 보안) 구성
• NSExceptionAllowsInsecureHTTPLoads
  : 안전하지 않은 HTTP 로드를 허용할지 여부

 

++ 그 외 속성은 하단 참조

https://developer.apple.com/documentation/bundleresources/information_property_list/nsexceptionallowsinsecurehttploads

NSExceptionAllowsInsecureHTTPLoads | Apple Developer Documentation

 

 

Expo config에 작성

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

 

// app.json
{
  "expo":{
    // ...
    "ios":{
      // ...
      "infoPlist": {
        "NSAppTransportSecurity": {
          "NSAllowsArbitraryLoads": true,
          "NSExceptionDomains": {
            "localhost": {
              "NSExceptionAllowsInsecureHTTPLoads": true
            }
          }
        }
      }
    }
  }
}

해당 설정을 추가하면, localhost의 특정 도메인에 대해 http 통신을 허용할 수 있다.

 

 

 

 

참고

https://developer.apple.com/documentation/bundleresources/information_property_list/nsexceptionallowsinsecurehttploads

https://github.com/axios/axios/issues/3192