axios.post returns bad request of 400 React Native

Question

I'm getting my token from an API but unfortunately my API is returning 400 bad request. I've already checked my api via Postman and it's working fine there. Kindly let me know solution or any mistake.

async componentWillMount(){
 axios.post('http://api.myapiurl.com/token', {
                grant_type: 'PASSWORD',
                username: 'MY_USERNAME',
                password: 'MY_PASSWORD'
            }, {
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
                }
            }).then(response => {
                console.log(response.data)
            }).catch(err => console.log("api Erorr: ", err.message))
}

error in response below

Request failed with status code 400 - node_modules\axios\lib\core\createError.js:16:24 in createError - node_modules\axios\lib\core\settle.js:18:6 in settle - ... 10 more stack frames from framework internals

Solution 1

It is Solved by using QueryString.stringify(). I just pass the body into QueryString.stringify() like below:

axios.post('http://api.apiurl.com/token', QueryString.stringify({
            grant_type: 'MY_GRANT_TYPE',
            username: 'MY_USERNAME',
            password: 'MY_PASSWORD'
        }), {
            headers: {
                "Content-Type": "application/x-www-form-urlencoded",
            }
        }).then(response => {
            console.log(response.data)
        }).catch(err => console.log("api Erorr: ", err.response))

Solution 2

try using fetch instead, might be some axios bug, you dont need to add any libraries, here is an example:

fetch("http://api.myapiurl.com/token", {
  method: "POST", // *GET, POST, PUT, DELETE, etc.
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    grant_type: "PASSWORD",
    username: "MY_USERNAME",
    password: "MY_PASSWORD"
  }) 
})
  .then(res => {
    res.json();
  })
  .then(data => console.log(data))  // ur data is here
  .catch(err => console.log("api Erorr: ", err));

Solution 3

From what I can see you are sending json data, but your Content-Type header is set to application/x-www-form-urlencoded; charset=UTF-8. if your api is expecting json then it should be application/json.

Comments

[Panther]

You need to check on logs on server to see why 400 and fix that. With just the frontend code, we will not be able to tell what the server requires.

[akhtarvahid]

@Zaln KhAn you must be getting something in response error. check that because what error are you facing we can't find with this code.

[Panther]

The axios document says to send the params for www-form-urlencoded in a different way. Are you following that ?? github.com/axios/…

[Zain Khan]

updated please check.

[Panther]

By default, the params you send will be parsed to json. To send it in www-form-urlencoded, you need to follow the documentation.

[Zain Khan]

I tried to send data into JSON.stringify(obj) but not works

[Sushilzzz]

try not adding headers object, remove this: { headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }

[Learner]

can you just post the curl of the postman ?

[Zain Khan]

@Sushilzzz I tried but not works.

[Sushilzzz]

what do u send in postman, can u send pic ?

[Zain Khan]

@Sushilzzz updated please check

[Sushilzzz]

ur code seems correct, dont put in headers object as i told u and console.log(response) only, not response.data. there might be error in axios library u installed if not try using fetch()

[Zain Khan]

@Sushilzzz just tried but not works.

[Zain Khan]

and I'm calling the service in async componentWillMount(){}

[Sushilzzz]

posted a fetch example, try that, should work

[Prithwee Das]

what is your api expecting? json or FromData?

[Zain Khan]

I'm getting the data in the form of JSON

[Zain Khan]

can I get data using fetch in react native expo app?

[Zain Khan]

Did you figure out whats happening?