axios GET request with form data in React JS

Question

I want to implement the following cURL request (which is working) in react js using axios:

curl -k --request GET "BASE_URL_SERVER/sendText" --form "user_id="uidxxxx"" --form "sign_id="

I always get the same error: field sign_id not found, but technically I'm sending it, so I'm kind of desesperate.

var data = new FormData();
data.append('user_id', 'uidxxxx');
data.append('sign_id', '9');

const api = axios.create({
    baseURL: BASE_URL_SERVER,
    data: data,
    headers: {
        'Content-Type': `multipart/form-data; boundary=${data._boundary}`
    },
    timeout: 10000,
})

api.get('/sendText')
    .then(response => console.log(JSON.stringify(response.data)))
    .catch(error => { console.log(error) })

I've also tried adding '...getHeaders()' to the headers section but React says it is not a function; I've read in other posts that it has something to do with the browser

thanks in advance

ps: it is a pretty similar problem to this one, but none of the solutions worked for me

[UPDATE] I ended up implementing it with POST, which is better for posting Form Data; no headers are needed, the browser automatically adds them:

var data = new FormData();
data.append('user_id', user_id);
data.append('sign_id', sign_id);

const api = axios.create({
    baseURL: BASE_URL_SERVER,
    timeout: TIMEOUT_SERVER,
})

api.post('/sendText', data)
    .then(response => console.log(JSON.stringify(response.data)))
    .catch(error => { console.log(error) })

score 1 · Answer 1 · answered May 10 '21 at 23:08

You have a mistake, you try to send data via axios for POST and method is GET...

So that, You need to Change Method to be POST to can Post form data or you need to change it to url param or url path base on your api to be WORK as a GET...

Base on your curl, your case is you need a GET:

// Make a request for a user with a given ID
axios.get('/sendText?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

// Optionally the request above could also be done as
axios.get('/user', {
    params: {
      sendText: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // always executed
  });

Also, you can save all config in instance and share it for all nested of write it again and again.. for example:

// Common Axios Instance Config
const axiosConfig = {
  baseURL: process.env.REACT_APP_API_ENDPOINT,
};

// Create Default Axios Instace
const instance = axios.create(axiosConfig);

I think base on your example this will work, but not sure sine I'm not test it..:

var data = new FormData();
data.append('user_id', 'uidxxxx');
data.append('sign_id', '9');

const api = axios.create({
    baseURL: 'https://193.146.38.4:56076',
    headers: {
        'Content-Type': `multipart/form-data; boundary=${data._boundary}`
    },
    timeout: 10000,
})

    api.get('/sendText', {
user_id: 111,
sign_id: 2222
)
        .then(response => console.log(JSON.stringify(response.data)))
        .catch(error => { console.log(error) })

For more details view this url

after 100 attempts, I decided to implement it using POST, I think GET and FormData don't get on pretty well; thanks a lot 4 the answer — mateomotriz, May 13 '21 at 09:09

axios GET request with form data in React JS

1 Answers1