axios POST请求击中控制器上的url,但将空值设置为我的POJO类,当我在chrome中通过开发人员工具时,有效载荷包含数据。我做错了什么?

Axios POST请求

var body = {
    userName: 'Fred',
    userEmail: 'Flintstone@gmail.com'
}

axios({
    method: 'post',
    url: '/addUser',
    data: body
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

浏览器响应:

如果我设置头信息为:

headers:{
  Content-Type:'multipart/form-data'
}

请求抛出错误

在发布多部分/表单数据时出错。内容类型报头缺少边界

如果我在邮递员中提出相同的请求,它就会正常工作,并为我的POJO类设置值。

有人能解释如何设置边界或如何使用axios发送表单数据吗?


当前回答

在发送请求时设置边界(服务器用来解析有效负载)。在发出请求之前无法获得边界。因此,更好的方法是从你的FormData中使用getBoundary()。

var formData = new FormData();
formData.append('userName', 'Fred');
formData.append('file0', fileZero);
formData.append('file1', fileOne);

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

其他回答

我需要一次使用axios上传许多文件,因为FormData API,我挣扎了一段时间:

// const instance = axios.create(config);

let fd = new FormData();
for (const img of images) { // images is an array of File Object
  fd.append('images', img, img.name); // multiple upload
}

const response = await instance({
  method: 'post',
  url: '/upload/',
  data: fd
})

我没有指定content-type: multipart/form-data头!

 transformRequest: [
  function(data, headers) {
    headers["Content-Type"] = "application/json";
    return JSON.stringify(data);
  }
]

试试这个,很管用

我在使用带有axios的FormData对https://apps.dev.microsoft.com服务进行调用时遇到了类似的问题,它错误地显示出“请求体必须包含以下参数:'grant_type'”

重新格式化后的数据

{
  grant_type: 'client_credentials',
  id: '123',
  secret: '456789'
}

to

"grant_type=client_credentials&id=123&secret=456789"

下面的代码起作用了:

const config: AxiosRequestConfig = {
    method: 'post',
    url: https://apps.dev.microsoft.com/auth,
    data: 'grant_type=client_credentials&id=123&secret=456789',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
    }
};

axios(config)
.then(function (response) {
  console.log(JSON.stringify(response.data));
})
.catch(function (error) {
  console.log(error);
});

你可以通过使用FormData()来发布axios数据,比如:

var bodyFormData = new FormData();

然后将字段添加到您想要发送的表单:

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

如果你正在上传图片,你可能想要使用.append

bodyFormData.append('image', imageFile); 

然后你可以使用axios post方法(你可以相应地修改它)

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);
  });

相关GitHub问题:

不能得到一个。post与'Content-Type': 'multipart/form-data'工作@ axios/axios

在发送请求时设置边界(服务器用来解析有效负载)。在发出请求之前无法获得边界。因此,更好的方法是从你的FormData中使用getBoundary()。

var formData = new FormData();
formData.append('userName', 'Fred');
formData.append('file0', fileZero);
formData.append('file1', fileOne);

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