400 Ошибка при получении из API с использованием Axios в реагировать родной - PullRequest
Новая
       7

400 Ошибка при получении из API с использованием Axios в реагировать родной

0 голосов
/ 05 февраля 2019

enter image description here У меня проблема с извлечением API-интерфейса в приложении native с использованием Axios.Веб-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, который подразумевает, что есть проблема с кодом, или URL-адрес неправильно привязан из-за grant_type, указанного в теле сообщения.Найти прилагается для вашего прочтения.enter image description here

Большое спасибо за вашу помощь

1 Ответ

0 голосов
/ 05 февраля 2019

Согласно вашему примеру с почтальоном, вы отправляете запрос с типом содержимого "text / plain", чтобы вы могли установить соответствующую опцию request в вашем запросе 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' }
});
...