React Native - Network Request Failed

Question

I am new to ReactNative and am attempting to write a simple login form with the credentials from a Wordpress Website. I keep receiving the following error on the Simulator, as well as on a real device:

React Code:

constructor(props) {
        super(props);
        this.validate = this.validate.bind(this);
        this.state = {
            validating: false,
            email: '',
            password: ''
        };
    }

render() {
        return (
            <View style={styles.container}>
                <TextInput style={styles.input}
                    onChangeText={(text) => this.setState({email:text})}
                    autoCapitalize="none" 
                    onSubmitEditing={() => this.passwordInput.focus()} 
                    autoCorrect={false} 
                    keyboardType='email-address' 
                    returnKeyType="next" 
                    placeholder='Nutzername'
                    placeholderTextColor='rgba(225,225,225,0.7)' />
                <TextInput style = {styles.input}
                    onChangeText={(text) => this.setState({password:text})}   
                    returnKeyType="go"                     
                    placeholder='Passwort' 
                    secureTextEntry
                    placeholderTextColor='rgba(225,225,225,0.7)' />
                <TouchableOpacity style={styles.buttonContainer} onPress={this.validate}>
                    <Text style={styles.buttonText}>LOGIN</Text>
                </TouchableOpacity> 
            </View>
        );
    }
validate(){
    this.setState({ validating: true });

    let formData = new FormData();
    formData.append('type', 'login');
    formData.append('email', this.state.email);
    formData.append('password', this.state.password);

    return fetch('http://myEbEnv.elasticbeanstalk.com/authentication.php', {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        body: formData
    })
    .then((response) => response.json())
    .then((responseJson) => {
        console.log('Success!');
    })
    .catch((error) => {
        console.error(error);
    });
}

My Info.plist:

<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoadsInWebContent</key>
        <true/>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
        <key>NSExceptionDomains</key>
        <dict>
            <key>localhost</key>
            <dict>
                <key>NSExceptionAllowsInsecureHTTPLoads</key>
                <true/>
            </dict>
            <key>http://myEbEnv.elasticbeanstalk.com</key>
            <dict>
                <key>NSExceptionAllowsInsecureHTTPLoads</key>
                <true/>
            </dict>
        </dict>
    </dict>

I cannot see where the issue is. The Error on line 504 (See Screenshot) is an error message from a failed XMLHttpRequest. Any ideas how to fix it? Thanks in advance!

Answer 1

You should not be including the protocol in the exception domains. It should simply contain the domain:

        <key>myEbEnv.elasticbeanstalk.com</key>
        <dict>
            <key>NSExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>

If it is the connection to myEbEnv.elasticbeanstalk.com that is causing your problem, you should be able to hit it over HTTP now.