CODEWITHSUNDEEP
javascriptaxios
Jirakit Paitoonnaramit
Jirakit Paitoonnaramit

Reputation: 167

cannot post in axios in vue.js

I have try this code

axios
    .post("http://localhost:3010/user/login", {
      headers: {
        "Content-type": "application/json"
      },
      body: JSON.stringify({ username: "username", password: "password" })
    })
    .then(response => {
      this.resp = response;
    })
    .catch(e => {
      console.error(e);
    });

but response it invalid login but it work in postman

enter image description here

What wrong with it?

in web response like this

enter image description here

Upvotes: 0

Views: 7058

Answers (2)

NiiLx
NiiLx

Reputation: 676

Change headers From:

headers: {
        "Content-type": "application/json"
      }

To

headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
}

Now try, It worked for me

Upvotes: 0

Daniel
Daniel

Reputation: 35724

when you send an object using post, it gets converted to a string, so what you're effectively sending to your API endpoint is:

JSON.stringify(JSON.stringify({ username: "username", password: "password" }))

there is no need for that

Also, you don't send a body as part of the headers.

https://github.com/axios/axios#request-method-aliases

axios.post(url[, data[, config]])

what that means in your case is that you send three arguments, url, then data and then the options. Since the only header you send is that it is json data, and axios can take care of that for you, the options in this case are not needed so you can use just the first two parameters

axios
    .post(
      "http://localhost:3010/user/login",
      {
         username: "username",
         password: "password" 
      }
    )
    .then(response => {
      this.resp = response;
    })
    .catch(e => {
      console.error(e);
    });

Upvotes: 1

Related Questions