how to solve 'content-type missing boundary' and getBoundary is not a function?

Question

getCarouselData: async (params) => {
  let bodyFormData = new FormData();
  for (let key in params) {
    bodyFormData.append(key, params[key]);
  }
  return axios({
    method: "post",
    url: `${baseURL}/getCarouselData`,
    data: bodyFormData,
    headers: { "Content-Type": `multipart/form-data;};` },
  });
};

In the nextjs am calling the API by axios method.

If I set the content-type as "Content-Type": multipart/form-data; am getting 'content-type missing boundary' error.
If I set the content-type as "Content-Type": multipart/form-data; boundary=${bodyFormData.getBoundary()}; am getting bodyFormData.getBoundary is not a function

3)If I remove the content-type entirely "header:{}" or without header parameter am getting "unsupported content-type" error

How to solve this issue. But in the both methods am getting the response from the API after the error display.

But in postman am getting the result without any error

Does this answer your question? [Pass Data to Service in Axios](https://stackoverflow.com/questions/68643330/pass-data-to-service-in-axios) — Phil, Dec 29 '22 at 07:43
If I remove the content-type entirely "header:{}" or without header parameter am getting "unsupported content-type" error @Phil — Ajith Arasu, Dec 29 '22 at 08:15
Are you making the request from the browser or from Node.js? Also, what version of Axios are you using? — Phil, Dec 29 '22 at 08:17
installed axios version is "axios": "^0.21.1", The request send from the browser. @Phil — Ajith Arasu, Dec 29 '22 at 08:19
Can you explain why you thought that there would be a `.getBoundary()` method? — Bergi, Dec 29 '22 at 08:26
Have you customised Axios with any default headers by any chance? — Phil, Dec 29 '22 at 08:45
I cannot reproduce any such problem with Axios 0.21.1 ~ https://jsfiddle.net/zsuj7qr9/. Please check the actual installed version of Axios... as mentioned in the duplicate, if you have 0.27.1 it won't work. Axios post v1.0.0 has also been terribly broken. I would recommend simply using the Fetch API instead — Phil, Dec 29 '22 at 08:56
Am using nextjs serverside rendering getServerSideProps(). is that affect any API requests? @Phil — Ajith Arasu, Dec 29 '22 at 09:03
I already asked you which client was making the request (and you said the browser). If it's server-side, you need to pull the correct headers from the `FormData` instance. This is also mentioned in the duplicate — Phil, Dec 29 '22 at 09:05

score -1 · Answer 1 · answered Dec 29 '22 at 22:09

It works fine with v1.2.2:

import axios from 'axios';
import FormData from 'form-data';

console.log(axios.VERSION);

const data = {x: "foo", y: "bar"};

let bodyFormData = new FormData();
for (let key in data) {
  bodyFormData.append(key, data[key]);
}

const {data: {form, headers}} = await axios({
  method: "post",
  url: `http://httpbin.org/post`,
  data: bodyFormData,
  headers: {"Content-Type": `multipart/form-data;`},
});

console.log('headers:', headers);
console.log('form', form);

Or a shorter approach:

import axios from 'axios';

const data = {x: "foo", y: "bar"};

const {data: {form, headers}} = await axios({
  method: "post",
  url: `http://httpbin.org/post`,
  data: data,
  headers: {"Content-Type": `multipart/form-data`},
});

console.log('headers:', headers);
console.log('form', form);

Log:

1.2.2

headers: {
  Accept: 'application/json, text/plain, */*',
  'Accept-Encoding': 'gzip, compress, deflate, br',
  'Content-Length': '262',
  'Content-Type': 'multipart/form-data; boundary=--------------------------310666769872409476705056',
  Host: 'httpbin.org',
  'User-Agent': 'axios/1.2.2'
}
form { x: 'foo', y: 'bar' }

how to solve 'content-type missing boundary' and getBoundary is not a function?

1 Answers1