Why Does My React Native Fetch Request Fail with \"Network Request Failed\" on iOS?

Network Request Failure in React Native Fetch

In a newly created React Native project, calling fetch() to interact with the Facebook demo movie API may result in a "Network Request Failed" error. This can be frustrating due to its ambiguous error message and the lack of debugging support in the Chrome console.

Root Cause:

The underlying issue lies in iOS's restriction on HTTP requests by default, allowing only HTTPS connections.

Solution:

To enable HTTP requests in your iOS project, modify your info.plist file within the XCode project's "Supporting Files" section:

1. Add the following key-value pair to the file:

<code class="plist"><key>NSAppTransportSecurity</key></code>

2. Add a dictionary within the key:

<code class="plist"><key>NSAppTransportSecurity</key>
<dict></code>

3. Add another key-value pair within the dictionary:

<code class="plist"><key>NSAllowsArbitraryLoads</key>
<true/>
</dict></code>

This setting will grant your app permission to make HTTP requests on iOS devices.

Once the changes are made and the project is rebuilt, the fetch request will succeed, as both your local development environment and iOS devices will allow HTTP connections.

The above is the detailed content of Why Does My React Native Fetch Request Fail with \"Network Request Failed\" on iOS?. For more information, please follow other related articles on the PHP Chinese website!