React Native — a gotcha with fetch()
Have you ever got stuck when working with fetch() and for some reason keep getting errors when trying to pull data in from a third party API? Even though you followed that tutorial you were working through exactly as the author wrote it? I got stuck on this recently and discovered it wasn’t an issue until sometime in December of 2016. Here’s what I found.
Apple enables App Transport Security (ATS) by default for apps linked against iOS 9.0 or OS X v10.11 SDK. In react-native these are set in the info.plist file under the ios/{your project name} folder.
Versions of react-native prior to 0.28 defaulted the commands in info.plist to allow non secure requests (i.e. http) with the following code:
The above allowed your fetch() command to use either an http or an https uri. However, Apple announced that after December of 2016 all apps that set this key’s value to True will trigger an automatic App Store review and will require justification. See Apple’s ATS documentation here: https://developer.apple.com/library/content/documentation/General/Reference/InfoPlistKeyReference/Articles/CocoaKeys.html#//apple_ref/doc/uid/TP40009251-SW33.
As a result, react native changed the default info.plist code to align with Apple’s ATS policy and structured the code to specifically identify each domain that will be allowed non-secure access. So now the default code in info.plist looks like this:
The app is only allowed to access localhost without a secure connection, all other domains must be accessed via https. The problem arises when you want to access a third party API that is not served up using https. To do this you must add another <key> under the NSExceptionDomains. For example, let’s say your API is located at testapi.com. You need to open info.plist and add it to the list of exception domains like this:
Now your app should stop throwing the security error and your fetch() commands should work just fine.
Just remember, whenever your app needs to access a third party URL that doesn’t use a secured connection, make sure to account for it by adding the domain in the info.plist file.
