0

When My Vuejs code try to post JSON, backend returned 400 error.

I found clue for that by chrome network capture.
My Axios code sended JSON with data-binary format.

curl 'http://localhost:5000/api/auth/login'  \
  -H 'Content-Type: application/json;charset=UTF-8' \
  -H 'Accept: application/json' \
  --data-binary '{"username":"admin","password":"ehllow"}'

But I don't know how it works like it.
My expecting request is

curl ... -D '{"username":"admin","password":"ehllow"}'`

not --data-binary

Here is my javascript code.

axios({
  method: 'post',
  url: '/api/auth/login',
  data: {
    "username": "admin",
    "password": "ehllow"
  },
  config: {
    headers: {
      'Content-Type': 'application/json'
    }
  }
})
.then(function (response) {
  //handle success
  console.log(response);
})
.catch(function (response) {
  //handle error
  console.log(response);
});

How can I change my axios code to send json to normal Data(-D)

Phil
  • 157,677
  • 23
  • 242
  • 245
sungyong
  • 2,267
  • 8
  • 38
  • 66
  • There's not enough information here to debug. What is the response text for the 400 status? – Phil Aug 31 '18 at 00:12
  • 1
    Also, there's nothing wrong with `--data-binary`. RTFM ~ _"This posts data exactly as specified with no extra processing whatsoever"_ – Phil Aug 31 '18 at 00:13
  • FYI, there is no `config` option for axios requests and the default content-type is `application/json` anyway – Phil Aug 31 '18 at 00:15
  • You mean ``--data-binary``` is not problem. I'll check back end codes. Thank you. – sungyong Aug 31 '18 at 00:36
  • 1
    Correct, it is not a problem at all – Phil Aug 31 '18 at 00:37

1 Answers1

3

I had the same question, answer was here: axios post request to send form data

In short:

let data = new FormData();
data.set("username", "admin");
data.set("password", "ehllow");
axios({
  method: 'post',
  url: '/api/auth/login',
  data: data,
  config: {
    headers: {
      'Content-Type': 'application/json'
    }
  }
})

Threw me for a loop, as binary data is read differently than form data.