Axios Http Client - How to Construct Http Post Url with Form Params

Axios Http client - How to construct Http Post url with form params

You have to do the following:

var querystring = require('querystring');
//...
axios.post(authServerUrl + token_access_path,
    querystring.stringify({
            username: 'abcd', //gave the values directly for testing
            password: '1235!',
            client_id: 'user-client'
    }), {
      headers: { 
        "Content-Type": "application/x-www-form-urlencoded"
      }
    }).then(function(response) {
        console.log(response);
    });

axios post request to send form data

You can post axios data by using FormData() like:

var bodyFormData = new FormData();

And then add the fields to the form you want to send:

bodyFormData.append('userName', 'Fred');

If you are uploading images, you may want to use .append

bodyFormData.append('image', imageFile); 

And then you can use axios post method (You can amend it accordingly)

axios({
  method: "post",
  url: "myurl",
  data: bodyFormData,
  headers: { "Content-Type": "multipart/form-data" },
})
  .then(function (response) {
    //handle success
    console.log(response);
  })
  .catch(function (response) {
    //handle error
    console.log(response);
  });

Related GitHub issue:

Can't get a .post with 'Content-Type': 'multipart/form-data' to work @ axios/axios

How to post query parameters with Axios?

axios signature for post is axios.post(url[, data[, config]]). So you want to send params object within the third argument:

.post(`/mails/users/sendVerificationMail`, null, { params: {
  mail,
  firstname
}})
.then(response => response.status)
.catch(err => console.warn(err));

This will POST an empty body with the two query params:

POST
http://localhost:8000/api/mails/users/sendVerificationMail?mail=lol%40lol.com&firstname=myFirstName

Axios - get url with parameters without actually making request

Perhaps you're after axios#getUri(), which you could use by adding the params property and the url property to the config object passed to the method:

const params = {  page: 1,  date: '2020-03-20'}
const url = '/create-label-shipments.csv';const res = axios.getUri({url, params});
console.log(res);

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js" integrity="sha256-T/f7Sju1ZfNNfBh7skWn0idlCBcI3RwdLSS4/I7NQKQ=" crossorigin="anonymous"></script>

post form data to api (axios) reactjs

Have you tried sent Formular with axios.post to your backend. Some info on axios post requests and connecting frontend to backend.


In your second picture, it might be easier to send the data in the onSubmit.

onSubmit: {(values, { setSubmitting }) => {
  console.log(values) // Just to be sure you have them correct

  // POST request
    axios.post('http:localhost:portNUM', values) // Add headers if you have any.
    .then(response => console.log(response))
    .catch(error => console.log(error))
    .finally(() => setSubmitting(false))
  }
}

It might also be easier to use a useEffect within the onSubmit, just to make life a bit easier. If you know how to use react hooks and if not, I would recommend learning them.

---

Related Topics