React-native fetch() from https server with self-signed certificate

by

Disclaimer: This solution should be temporary and documented so that it won’t stay in the production phase of the software, this is for development only.

For iOS, all you have to do is, open your xcodeproject (inside your iOS folder in RN) once you have that open, go to RCTNetwork.xcodeproj and in that project, navigate to RCTHTTPRequestHandler.m

In that file you will see a line like this:

#pragma mark - NSURLSession delegate

right after that line, add this function

- (void)URLSession:(NSURLSession *)session didReceiveChallenge:(NSURLAuthenticationChallenge *)challenge completionHandler:(void (^)(NSURLSessionAuthChallengeDisposition disposition, NSURLCredential *credential))completionHandler
{
  completionHandler(NSURLSessionAuthChallengeUseCredential, [NSURLCredential credentialForTrust:challenge.protectionSpace.serverTrust]);
}

And voila, you can now make insecure calls to your API without a valid certificate.

That should be enough, but if you are still having problems, you might need to go to your project’s info.plist, left click on it and choose open as… source code.

and at the end just add

<key>NSAppTransportSecurity</key>
  <dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
  </dict>
  <key>NSExceptionDomains</key>
    <dict>
        <key>localhost</key>
        <dict>
            <key>NSExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>
        <key>subdomain.example.com</key>
        <dict>
            <key>NSIncludesSubdomains</key>
            <true/>
            <key>NSExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>
    </dict>

so your file will look like this

    ...
    <key>UISupportedInterfaceOrientations</key>
    <array>
        <string>UIInterfaceOrientationPortrait</string>
        <string>UIInterfaceOrientationLandscapeLeft</string>
        <string>UIInterfaceOrientationLandscapeRight</string>
    </array>
    <key>UIViewControllerBasedStatusBarAppearance</key>
    <false/>
    <key>NSLocationWhenInUseUsageDescription</key>
    <string></string>
  <key>NSAppTransportSecurity</key>
  <dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
  </dict>
  <key>NSExceptionDomains</key>
    <dict>
        <key>localhost</key>
        <dict>
            <key>NSExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>
        <key>subdomain.example.com</key>
        <dict>
            <key>NSIncludesSubdomains</key>
            <true/>
            <key>NSExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>
    </dict>
</dict>
</plist>

For a real production ready solution, https://stackoverflow.com/a/36368360/5943130 that solution is better

More Related Contents:

  1. Conditional Text Rendering in React Native
  2. What is the difference between Expo and React Native?
  3. Setting environment variable in react-native?
  4. React Native version mismatch
  5. React navigation goBack() and update parent state
  6. Render HTML in React Native
  7. How to upload file to server using react-native
  8. React-Navigation with Login Screen
  9. How do I display an animated gif in React Native?
  10. react-native-fbsdk error: No resource found that matches the given name: attr ‘android:keyboardNavigationCluster’
  11. How to remove ‘Warning: Async Storage has been extracted from react-native core…’?
  12. StackNavigator through Component gives undefined error
  13. Renaming a React Native project?
  14. Does react native support base64 encoded images?
  15. FlatList calls `onEndReached` when it’s rendered
  16. React Native – Device back button handling
  17. Is React Native’s Async Storage secure?
  18. Pass Data between Pages in React native
  19. Unable to resolve module `@babel/runtime/helpers/interopRequireDefault`
  20. React Native Android Build Error MainActivity.java:29: error: cannot find symbol
  21. react native get TextInput value
  22. Detect ScrollView has reached the end
  23. Facing issue ” Failed to install the app. Make sure you have the Android development environment ” in react native
  24. Network Response Time Out Error (create-react-native-app) (expo)
  25. However, this package itself specifies a `main` module field that could not be resolved
  26. How to download a file with React Native?
  27. React Native – React Navigation transitions
  28. JSON Parse error: Unrecognized token’
  29. React Native – Difference between onChange vs onChangeText of TextInput
  30. fetch response.json() gives responseData = undefined

Leave a Comment