React Native — a gotcha with fetch() – React Native Institute – Medium

A gotcha with fetch()  #javascript

  • 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.
  • Never miss a story from React Native Institute , when you sign up for Medium.
  • The app is only allowed to access localhost without a secure connection, all other domains must be accessed via https.
  • 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.
  • The above allowed your fetch() command to use either an http or an https uri.

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…

@ng_real_ninja: A gotcha with fetch() #javascript

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. 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:

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 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.

React Native — a gotcha with fetch() – React Native Institute – Medium