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发送表单数据吗?
当需要从NodeJS环境中使用axios POST x-www-form- urlenencoded数据时，这应该工作得很好。您可能需要向配置中添加一个授权标头。如果端点需要身份验证，则返回头对象。
const config = {
headers: {
accept: 'application/json',
'cache-control': 'no-cache',
'content-type': 'application/x-www-form-urlencoded'
}
const params = new URLSearchParams({key1: value1, key2: value2});
return axios
.post(url, params.toString(), config)
.then((response) => {
return response.data;
})
.catch((error) => console.error(error));
上面的方法对我来说很有效，但因为这是我经常需要的东西，所以我使用了一个基本的方法来制作平面物体。注意，我也在使用Vue而不是REACT
packageData: (data) => {
const form = new FormData()
for ( const key in data ) {
form.append(key, data[key]);
}
return form
}
这对我有用，直到我遇到更复杂的数据结构与嵌套对象和文件，然后让以下
packageData: (obj, form, namespace) => {
for(const property in obj) {
// if form is passed in through recursion assign otherwise create new
const formData = form || new FormData()
let formKey
if(obj.hasOwnProperty(property)) {
if(namespace) {
formKey = namespace + '[' + property + ']';
} else {
formKey = property;
}
// if the property is an object, but not a File, use recursion.
if(typeof obj[property] === 'object' && !(obj[property] instanceof File)) {
packageData(obj[property], formData, property);
} else {
// if it's a string or a File
formData.append(formKey, obj[property]);
}
}
}
return formData;
}
你可以通过使用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
对我来说，它使用axios, typescript和form-data(v4.0.0)工作:
import FormData from "form-data";
import axios from "axios";
async function login() {
var data = new FormData();
data.append("User", "asdf");
const return = await axios.post(
"https://ptsv2.com/t/1q9gx-1652805776/post", data,
{ headers: data.getHeaders() }
);
console.log(return);
}
在axios中使用application/x-www-form-urlencoded格式
默认情况下，axios将JavaScript对象序列化为JSON。发送数据
在application/x-www-form-urlencoded格式中，您可以使用
以下选项之一。
浏览器
在浏览器中，你可以像下面这样使用URLSearchParams API:
const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);
请注意，URLSearchParams不是所有浏览器都支持的(参见caniuse.com)，但有一个可用的polyfill(确保填充全局环境)。
或者，你可以使用qs库编码数据:
const qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 }));
或者用另一种方式(ES6)，
import qs from 'qs';
const data = { 'bar': 123 };
const options = {
method: 'POST',
headers: { 'content-type': 'application/x-www-form-urlencoded' },
data: qs.stringify(data),
url, };
axios(options);
