使用 Axios 在本机反应中从 API 获取时出现 400 错误

Question

我在使用 Axios 在 React Native 中获取 API 时遇到问题。 web API 与 grant_type 有点复杂，这是一个大问题。此外，是否需要在 xcode 上进行任何配置以允许 HTTP 资源？

import React, { Component } from 'react';
import { 
    Text, 
    TouchableOpacity,
    View,
    TextInput,
    StyleSheet,
 } 
 from 'react-native';
 import axios from 'axios';

 export default class Login extends Component {
     constructor(props){
         super(props)
       this.state =  {
                username:'',
                password:''
         };
     }
     componentDidMount(){
         const data={
             grant_type: 'password',
             client_id:'RxPadApp',
             username: this.state.username,
             password: this.state.password,

         }
         axios.post('http://192.168.210.159:3000/api/2019/token',
             data
         )
         .then((response)=>{
             console.log(response);
         }).catch((error)=>{
             console.log(error);
         });
     }
     render(){
         return(
            <View style ={styles.container}>
                <View style={styles.logCon}>
                    <Text style={styles.loginText}>Login</Text>
                </View>
                <Text style= {styles.label}>Username</Text>
                <TextInput 
                  style={styles.textbox}  
                  autoCapitalize="none"
                  placeholder="Username"
                  onChangeText= {(username)=>{
                       this.setState({username});
                  }
                  }
                  value={this.state.username}/>

                <Text style= {styles.label}>Password</Text> 
                <TextInput 
                  style={styles.textbox}  
                  placeholder="Password"
                  secureTextEntry={true}
                  onChangeText= {(password)=>{
                       this.setState({password});

                  }

                  }
                  value={this.state.password}
                />

                <View>
                    <Text>Forgot password</Text>
                </View>
                <TouchableOpacity style={styles.signin}

                >
                    <Text style={styles.signinText}>Sign In</Text>
                </TouchableOpacity>
                <View style={styles.signupTextCont}>
                    <Text style={styles.signupText}>Not an APG Member? </Text>
                    <Text 
                    style={{fontWeight:'bold', color: '#1A78B9'}}
                    onPress={() => this.props.navigation.navigate('SignupScreen')}
                    >
                    Sign Up
                    </Text>
                </View> 
            </View>
         );
     }
 }

这是网址：http://192.168.210.159:3000/api/2019/token，这是邮递员正文中的授权类型：grant_type=password&username=mary2@ApgDemo.ca&password=demodemo&client_id=RxPadApp。标头包括 content-type = application/x-www-form-urlencoded。 我打算登录到主页。

同时看着控制台。它显示错误代码 400，这意味着代码有问题，或者由于帖子正文中指定的 grant_type 导致 URL 未正确绑定。查找附件供您阅读。

非常感谢您的帮助

Answer 1

根据您的邮递员示例，您正在发送内容类型为“text/plain”的请求，因此您可以在 axios 请求中设置相应的请求选项：

const data = 'grant_type=password&username=mary2@ApgDemo.ca&password=demodemo&client_id=RxPadApp';   
axios.post('http://192.168.210.159:3000/api/2019/token', data, { headers: { 'Content-Type': 'text/plain' }
});