React native ios web View Error 핸드링 ( App Transport Security policy requires the use of a secure connection )

프론트엔드 개발자로 업무를 진행 하며 수많은 에러를 겪고 있습니다.

그 순간만 모면하고 지나가는 일상이였는데, 제가 겪었던 에러들을 기록 하고 싶어 글을 남깁니다.

현재 진행중인 프로젝트에서는 리액트 네이티브로 개발을 진행중입니다.

그중 webView 를 통해 URL 을 보여줘야하는 작업이 있었습니다.

Android 에서는 문제 없이 출력이 되었습니다.

IOS 에서는 다음과 같은 에러 로그가 나왔습니다.

App Transport Security policy requires the use of a secure connection

Encountered an error loading page {"canGoBack": false,
"canGoForward": false, "code": -1022, "description": "The resource could not be loaded because the App Transport Security policy requires the use of a secure connection."
"didFailProvisionalNavigation": true, "domain":
"NSURLErrorDomain", "loading": false, "target": 639, "title": ""
"Url": ""')

자료를 찾아보니 HTTP로 접속을 하거나, 인증되지 않은 HTTPS

즉, 정상적인 SSL이 아닌 곳으로 이동이나 webView를 띄우면 아래와 같은 에러가 나게 된다고 합니다.

해결

ios 폴더 -> 프로젝트이름 -> info.plist

	<dict>
		<key>NSAllowsArbitraryLoads</key>
		<true/> 
		<key>NSAllowsArbitraryLoadsInWebContent</key>
		<true/>
		<key>NSExceptionDomains</key>
		<dict>
			<key>http://example.co.kr</key> // 사용할려는 도메인
			<dict>
				<key>NSExceptionAllowsInsecureHTTPLoads</key>
				<true/>
				<key>NSExceptionRequiresForwardSecrecy</key>
				<true/>
				<key>NSIncludesSubdomains</key>
				<true/>
			</dict>
		</dict>
	</dict>

입력해 주시면 정상적으로 웹뷰를 보여주게됩니다.