React Native - 网络请求失败答案

【问题标题】：React Native - Network Request FailedReact Native - 网络请求失败
【发布时间】：2019-01-06 02:47:49
【问题描述】：

我是 ReactNative 的新手，我正在尝试使用来自 Wordpress 网站的凭据编写一个简单的登录表单。我在模拟器和真实设备上不断收到以下错误：

反应代码：

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);
    });
}

我的 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>

我看不出问题出在哪里。第 504 行的错误（参见屏幕截图）是来自失败的 XMLHttpRequest 的错误消息。任何想法如何解决它？提前致谢！

【问题讨论】：

使用 'Content-Type': 'multipart/form-data'

标签： react-native app-transport-security

【解决方案1】：

您不应将协议包含在异常域中。它应该只包含域：

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

如果是与 myEbEnv.elasticbeanstalk.com 的连接导致您的问题，您现在应该可以通过 HTTP 访问它。

【讨论】：