[英]Node axios not sending correct header: 'Content-Type': 'multipart/form-data'
[英]axios post request is sending a request header of Content-Type: multipart/form-data resulting in undefined req.body
我有一个使用 axios 发送发布请求的表单。 问题是使用 Content-Type: multipart/form-data 的 header 发送请求。 我的 nodejs api 不喜欢这个,给了我一个未定义的 req.body。
我还有其他 forms 使用相同的技术并且它们工作并且 header 与预期的一样: Content-Type: application/json;charset=UTF-8
发布 Content-Type: multipart/form-data 的表单没有任何图像。 只是文本输入字段。
如果我尝试手动设置表单标题,它们将被忽略。 为什么一个表单会发送标准的“application/json”而另一个表单会发送“multipart/form-data”?
这是哈巴狗的形式:
form.form.form-send-cert-data
.form__group
label.form__label(for='name') Recipients Name
input#name.form__input(type='text', required, name='name')
.form__group
label.form__label(for='email') Recipient Email
input#email.form__input(type='text', required, name='email')
.form__group
label.form__label(for='plantId') Plant
select(name='plantId', id='plantId')
each val in ['5f1133ca79232fab1ffe5be4' , '5f113d3944221b47f577c239' , '5f113e019f4aa448a253ed87']
option=val
.form__group
label.form__label(for='message') Message
input#message.form__input(type='text', required, name='message')
.form__group.right
button.btn.btn--small.btn--green Send Certificate
以下是我为帖子准备表单数据的方法:
addCertificateForm.addEventListener('submit', (e) => {
e.preventDefault();
const form = new FormData();
form.append('name', document.getElementById('name').value);
form.append('email', document.getElementById('email').value);
form.append('message', document.getElementById('message').value);
form.append('plantId', document.getElementById('plantId').value);
console.log('-Send Certificate-');
sendCertificate(form, 'data');
});
这是 sendCertificate.js:
import axios from 'axios';
import { showAlert } from './alerts';
export const sendCertificate = async (data, type) => {
console.log('sendCertificate.js');
try {
const url = '/api/v1/certificates/send';
const res = await axios({
method: 'POST',
url,
data,
});
if (res.data.status === 'success') {
showAlert('success', `${type.toUpperCase()} sent successfully!`);
}
} catch (err) {
showAlert('error', err.response.data.message);
}
};
由于您没有发送任何必须使用 FormData 发送的文件,因此您可以轻松构建 object 以传递给 axios ,它将作为 json 发送
addCertificateForm.addEventListener('submit', (e) => {
e.preventDefault();
const postData = {};
const keys = ['name', 'email', 'message', 'plantId'];
keys.forEach(k => postData[k] = document.getElementById(k).value)
sendCertificate(postData, 'data');
});
注意我已经多年没有使用 Axios 并且不记得是否需要设置 json 内容类型 header 或默认设置
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.