axios post 请求正在发送 Content-Type 的请求 header：multipart/form-data 导致未定义 req.body

Question

我有一个使用 axios 发送 post 请求的表单。问题是请求是用 Content-Type 的 header 发送的：multipart/form-data。我的 nodejs api 不喜欢这个，给了我一个未定义的 req.body.

我有其他使用相同技术的表格，它们可以工作，并且 header 符合预期：Content-Type: application/json;charset=UTF-8

正在 posting Content-Type 的表格：multipart/form-data 没有任何图像。只是文本输入字段。

如果我尝试手动设置表单 headers，它们将被忽略。为什么一种形式发送标准 'application/json' 而另一种形式发送 'multipart/form-data'？

这是 pug 中的表格：

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

以下是我如何为 post 准备表单数据：

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

Answer 1

由于您没有发送任何必须使用 FormData 发送的文件，因此您可以轻松构建一个对象以传递给 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 content-type header 还是默认设置

axios post 请求正在发送 Content-Type 的请求 header：multipart/form-data 导致未定义 req.body

axios post request is sending a request header of Content-Type: multipart/form-data resulting in undefined req.body

javascript

multipartform-data

node.js

axios