React - sending the correct data to server and get error

Question

I'm trying to create a login in react-native. For that I send the user info to the webservice. if the info is correct the server will return a json

The problem is that I send the correct user info to the server and I get an error message as if I put the incorrect info

But when I test with Postman with the same info I dont get any error message

constructor

constructor() {
        super()
        this.state = {
            showPass: true,
            press: false,
            username: "",
            password: ""
        }
    }

function that fetch the data

checkLogin = () => {
        const { username, password } = this.state;
        var url = 'https://xxxxxxx/xxxx/xxxx/xxxx/auth/login'

        fetch(url, {
            method: 'POST',
            headers: {
                Accept: 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                username, password
            })
        })
        .then((response) => response.json())
        .then((responseJson) => {
            if (!responseJson.errors) {
                this.props.navigation.navigate('foto');
                console.log(username + " 1");
                console.log(password + " 1");
            } else {
                Alert.alert('Error', responseJson.message, [{
                    text: 'Fechar'
                }]);
                console.log(username + " 2");
                console.log(password + " 2");

            }
        })
        .catch((error) => {
            console.error(error);
        })

Inputs

<TextInput onChangeText={text => this.setState({ username: text })} />
<TextInput onChangeText={text => this.setState({ password: text })} />

<TouchableOpacity style={Style.btnLogin} onPress={() => this.checkLogin()} >
        <Text style={Style.textoLogin}>Entrar</Text>
</TouchableOpacity>

JSON that I get from Postman with the same info from the input

{
    "errors": false,
    "type": "-",
    "line": "-",
    "message": "Login successfully!",
    "user": {
        "user_id": 2,
        "name": "xxxxxxx",
        "username": "xxxxxxxx",
        "email": "xxxxx@xxxxx.pt"
    },
    "_token": "xxxxxxxxxxx"
}

in your code are you setting `value={this.state.}` on the TextInput ? — lemieuxster, Apr 10 '19 at 21:44
I suspect your request body is not being formatted in the way you think it is. Have you tried checking your browser dev tools network tab and inspecting the request and body to make sure it's formatted as your API expects? EDIT: I now see this is `react-native`. https://stackoverflow.com/questions/33997443/how-can-i-view-network-requests-for-debugging-in-react-native can help you get the Chrome debugger setup to view network requests. — LMulvey, Apr 10 '19 at 21:57
Could get a little complex. Before you go that route, do you have access to this server's code? Are you able to debug there and log out what you're actually receiving from these requests? — LMulvey, Apr 10 '19 at 22:16
I've tried but the app dont run if I have the CORS enable. And no, I dont have access to the server code — iReallyNeedYourHelp, Apr 10 '19 at 22:22
Did you check pass username,password same to you are type in textFileds? body: JSON.stringify({ username, password }) — madu_dev, Apr 11 '19 at 03:22
Could you maybe try it without stringifying. I think fetch also supports objects as its body. — Rik, Apr 11 '19 at 06:43
@Rik are you telling me just to try `body: JSON({ username, password })` ? — iReallyNeedYourHelp, Apr 11 '19 at 16:27

score 0 · Accepted Answer · answered Apr 16 '19 at 15:41

So I solved my problem, I had to change my body to a FormData()

Here is the code:


checkLogin = () => {

        var url = 'https://xxxxx/xxxx/xxx/xxx/auth/login';
        const { username, password } = this.state;
        /*const username1 = this.state.username;
        const password1 = this.state.password;
        var data = {
            "username" : this.state.username,
            "password" : this.state.password 
        }*/
        var formData=new FormData();
        formData.append('username', username);
        formData.append('password',password);


        fetch(url, {
            method: 'POST',
           // body: JSON.stringify(data)
           body: formData
        })
        .then((response) => response.json())
        .then((responseJson) => {
            if (!responseJson.errors) {
                this.storeData(JSON.stringify(responseJson.user), responseJson._token)
                this.props.navigation.navigate('foto');

            } else {
                Alert.alert('Error', responseJson.message, [{
                    text: 'Fechar'
                }]);


            }


        })
        .catch((error) => {
            console.error(error);
        })

React - sending the correct data to server and get error

1 Answers1