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?

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?

• javascript
• reactjs
• axios
• postman

• Are you sure it's not an issue with CORS ? Chrome packaged apps can have cross domain permissions. When you install Postman it promts you that this app will access any domain. – Krzysztof Krzeszewski Commented Jul 24, 2019 at 10:17
• @KrzysztofKrzeszewski I don't have any errors from CORS. Only: 400 (Bad Request) – Umbro Commented Jul 24, 2019 at 10:19
• @KrzysztofKrzeszewski If it was a problem with CORS, I would probably have an error. Maybe I need to convert something? Something like: JSON.stringify ()? – Umbro Commented Jul 24, 2019 at 10:22
• 1 according to axios docs you post with a data key instead of a body – Krzysztof Krzeszewski Commented Jul 24, 2019 at 10:26
• @KrzysztofKrzeszewski I changed body to data, but I have the same error – Umbro Commented Jul 24, 2019 at 10:29

4 Answers 4

Axios handles error differently.

To find out what really is the issue.

You should use error.request to check if the request you made has error

and use error.response to get the error feedback from the server

  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 => { 
          if(err.request){
              console.log(err.request)
          }
          if(err.response){
              console.log(err.response)
          }
      });

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.

Localhost:3000/api/products 404 Error You did not create res.get("/api/products") on server.js or you did not set the proxy. check below for proxy setting.

Proxy error: could not proxy request /api/products Check this:

1. frontend/package.json

   { "name": "frontend", "proxy": "http://127.0.0.1:5000", ... }

2. stop running frontend and backend

3. Run backend first

   npm start

4. Then frontend

   cd frontend npm start

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.

npm i qs;
import qs as qs;

axios.post(your_url,
  qs.strigify({
      key1:value1,
      key2:value2,
 }),{
headers:{
   'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
}
})