iOS WKWebView blocks requests to localhost API in development builds
Problem
A React Native app using WKWebView (or Expo WebView) cannot make HTTP requests to a local development API (http://localhost:3000) on a physical iOS device. iOS enforces App Transport Security (ATS) which blocks all cleartext HTTP connections. Simulators work because they share the Mac's loopback interface, but physical devices cannot reach the Mac's localhost.
Error Output
NSURLErrorDomain error -1004: Could not connect to the server.
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Configure Localhost API Access for iOS WKWebView
WKWebView on iOS devices cannot access localhost due to App Transport Security (ATS) restrictions. Physical devices cannot connect to the Mac's localhost, leading to NSURLErrorDomain error -1004. This is because localhost resolves to 127.0.0.1 on the device, which does not point to the Mac's server.
Awaiting Verification
Be the first to verify this fix
- 1
Use Local Network IP Address
Instead of using 'http://localhost:3000', replace it with the local network IP address of your Mac. You can find your Mac's IP address in System Preferences under Network.
javascriptconst apiUrl = 'http://192.168.1.100:3000'; // Replace with your Mac's IP - 2
Update App Transport Security Settings
Modify the Info.plist file of your React Native project to allow HTTP connections to your local development server. Add an exception for your local network IP address.
xml<key>NSAppTransportSecurity</key> <dict> <key>NSExceptionDomains</key> <dict> <key>192.168.1.100</key> // Replace with your Mac's IP <dict> <key>NSExceptionAllowsInsecureHTTPLoads</key> <true/> </dict> </dict> </dict> - 3
Enable Local Network Privacy Permissions
Ensure that your app has permission to access the local network. Add the appropriate key to your Info.plist to request access to local network resources.
xml<key>NSLocalNetworkUsageDescription</key> <string>This app requires access to the local network to connect to the development server.</string> - 4
Test the Connection
Run your React Native app on a physical device and attempt to connect to the API using the local network IP address. Monitor the console for any errors.
javascriptfetch(apiUrl + '/endpoint') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error));
Validation
To confirm the fix worked, ensure that the app successfully fetches data from the API without any connection errors. Check the console logs for the expected response from the local server.
Sign in to verify this fix
Environment
- Product
- Expo WebView / React Native WKWebView
- OS
- iOS
- Environment
- development
Submitted by
Alex Chen
2450 rep