Fetch is not working

Environment

Environment: OS: Windows 10 Node: 8.10.0 Yarn: 1.5.1 npm: 5.6.0 Watchman: Not Found Xcode: N/A Android Studio: Version 3.0.0.0 AI-171.4443003

Packages: (wanted => installed) react: 16.3.0-alpha.1 => 16.3.0-alpha.1 react-native: 0.54.2 => 0.54.2

Expected Behavior

I am waiting for successful JSON from server: {“…”}

Actual Behavior

I get

SyntaxError: Unexpected token b in JSON at position 0

. b is the first letter of word “badlogin”. It responds server when sent wrong combination of userName and password. But when I use Postman with the same key vaules combination on the same addres I get correct rosponse from the server.

Steps to Reproduce

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


export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity
          style={styles.btn}
          onPress={this.login}>
          <Text>Log in</Text>
        </TouchableOpacity>
      </View>
    );
  }

  login = () => {
   
    fetch('http://.....', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          userName: "react",
          password: "123",
        })
      }).then((response) => response.json())
      .then((responseJson) => {
        console.log(responseJson.message);  
        if(responseJson.success === true) {
            alert('successufuly loged');
        }
        else{
            console.log(responseJson.message);  
            alert(responseJson.message);
        }
      })  
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#2896d3',
    paddingLeft: 40,
    paddingRight: 40,
  }, btn: {
    alignSelf: 'stretch',
    padding: 20,
    alignItems: 'center',
    backgroundColor: '#01c853',
  }
});

[vladinko0]

I solved this issue by using FormData instead to prepare data for sending:

......
login = () => {
    var formData = new FormData();
    formData.append('username', 'react');
    formData.append('password', '123');

    fetch('http://......', {
     method: 'POST',
     body: formData
........

[sfm2222]

try doing this alert(JSON.stringify(responseJson));

Also, are you using the same user name and password because it gives badlogin in reponse on postman as well.