Question

我在使用Axios进行本机响应时获取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>
         );
     }
 }

这是URL：http://192.168.210.159:3000/api/2019/token，这是Grant_type：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

根据邮递员示例，您正在发送内容类型为“文本/纯文本”的请求，因此可以在axios请求中设置相应的request-option：

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

在React Native中使用Axios从API提取API时发生400错误

1 个答案: