Error: Request failed with status code 400. Differences between sending in POSTMAN and in the application

Question

In POSTMAN it works:

1) url: https://app/login
2) method: POST
3) body
4) x-www-form-urlencoded
5)username: ****,
password: ****,
grant_type: 'password',
client_secret: '****',
client_id: '****'

In the function submit method POST, when the form is submit, it does not work. I have error:

xhr.js?b50d POST https://app/login 400 (Bad Request)

Error: Request failed with status code 400 at createError (createError.js?2d83) at settle (settle.js?467f) at XMLHttpRequest.handleLoad (xhr.js?b50d)

In tab Network in response I have:

{"error":"invalid_client","error_description":"Client credentials were not found in the headers or body"}

Login

class Login extends Component {
  constructor (props) {
    super(props);
    this.state = {
      email: '',
      password: ''
    }
  }

  handle = (e) => {
    const name = e.target.name;
    const value = e.target.value;
    this.setState({
      [name]: value
    });
  }

  submit = (event) => {
    event.preventDefault();

    const body1 = {
      username: this.state.email,
      password: this.state.password,
      grant_type: 'password',
      client_secret: '****',
      client_id: '****'
    }

    axios({ 
      method: 'post', 
      url: 'https://app/login', 
      body: body1, 
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
      }) 
      .then(res => { 
        if (res.status === 200) {
          console.log(res)
        } 
      }).catch(err => { 
        console.error(err);
      });

  }

  render () {
    return (
      <form action="" method="post" onSubmit={this.submit}>
        <div>
          <label htmlFor="email">Email</label>
          <input type="email" required  name="email"
            value={this.state.email}
            onChange={this.handle}  />
        </div>
        <div>
          <label htmlFor="password">Password</label>
          <input type="password"name="password"
            value={this.state.password}
            onChange={this.handle}  />
        </div>
        <button type="submit" value="Submit">Log</button>
      </form>
    )
  }
}

What are the differences between sending in POSTMAN and in the application? Contents of the body convert to a string?

Answer 1

The code is stating in the Content-Type that the body will be URL string encoded, but in the body it is given a JavaScript object. It doesn't seem like the Axios client turns that body object into a url-encoded value (ie from {a: 5, b: 2} to "a=5&b=2"). The code needs a function convert that. A popular one is qs.

Otherwise your data will probably be turned into a string with the .toString() method which will give you "[object Object]", you should be able to see this in the network tab of the developer tools.