'React Native, iOS 15, fetch: TypeError: Network request failed

I'm having this problem with fetch in React Native (on iOS 15.4):

TypeError: Network request failed
    at fetch.umd.js:535:18
    at JSTimers.js:214:18
    at _callTimer (JSTimers.js:112:7)
    at Object.callTimers (JSTimers.js:357:7)
    at MessageQueue.__callFunction (MessageQueue.js:419:27)
    at MessageQueue.js:116:12
    at MessageQueue.__guard (MessageQueue.js:370:9)
    at MessageQueue.callFunctionReturnFlushedQueue (MessageQueue.js:115:10)
    at debuggerWorker.js:69:58

...and I have seen many recommendations to modify the ios/[APP_NAME]/Info.plist file to allow HTTP requests. Unfortunately, none of them work for me. And I am not sure if I'm missing any steps or what's wrong.

So first, the domain is api.localhost:84 and this is my current snippet of the configuration:

    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSExceptionDomains</key>
        <dict>
            <key>localhost</key>
            <dict>
                <key>NSIncludesSubdomains</key>
                <true/>
                <key>NSExceptionAllowsInsecureHTTPLoads</key>
                <true/>
            </dict>
        </dict>
    </dict>

I have also tried many other variations, such as:

  1. changing the domain to api.localhost or api.localhost:84,
  2. adding <key>NSExceptionMinimumTLSVersion</key><string>TLSv1.1</string>,
  3. setting the Exception out of the NSExceptionDomains (to apply to every domain),
  4. using <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key><true/>,
  5. using <key>NSAllowsArbitraryLoads</key><true/>...

I think I tried every solution, that I have found on StackOverflow and none of them work. Every time I make a change, I also uninstall the app from the simulator and rebuild it. I have also found some advice to use the IP (instead of localhost), but it said that it applies to Android and I know, that localhost used to work for me on iOS. But one day it stopped working.

Is there any step that I'm missing? Or was there any change recently, which would require doing things differently?

I'm clueless... When I google the error, all the links are already purple. I even tried the second page of google results. Nothing works.

PS: This is my JS code:

class ApiConnector {

    static async post(api, path, body) {

        try {
            let response = await fetch(api.baseUrl + path, {
                method: "POST",
                headers: this.getHeaders(api.app.state.auth),
                body: JSON.stringify(body),
            });

            if (response.status >= 200 && response.status < 300) {

                // Success
                return response.json();

            } else {
                api.app.alert('"' + path + '" responded with ' + response.status);
            }

        } catch (e) {
            console.log(e);
            api.app.alert('Request error ('+e.message+').');
        }

        return false;
    }


    static getHeaders(auth: {login: string, password: string}): Headers {
        let headers = new Headers();

        if (auth.login && auth.password) {
            let base64 = require('base-64');
            headers.append(
                'Authorization',
                'Basic ' + base64.encode(auth.login+':'+auth.password)
            );
        }

        headers.append('Accept','application/json');
        headers.append('Content-Type','application/json');

        return headers;
    }
}



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source