当前位置: 首页 > 知识库问答 >
问题:

axios post请求正在发送内容类型为:multipart/form data的请求头,导致未定义的请求。身体

司空赞
2023-03-14

我有一个使用axios发送post请求的表单。问题在于,发送请求时使用的标题的内容类型为:multipart/form data。我的nodejsapi不喜欢这样,它给了我一个未定义的req。身体

我有其他使用相同技术的表单,它们可以工作,标题与预期的一样:Content-Type:application/json;字符集=UTF-8

张贴Content-Type: Multipart/form-data的表单没有任何图像。只是文本输入字段。

如果我尝试手动设置表单标题,它们将被忽略。为什么一个表单发送标准的应用程序/json,而另一个表单发送多部分/表单数据?

以下是帕格的表格:

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

共有1个答案

程鸿波
2023-03-14

由于您没有发送任何必须使用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内容类型头还是默认设置

 类似资料:
  • 我在Windows10上的VisualStudio中用C#编写了一个示例代码,该代码试图将带有自定义头的POST请求发送到运行在的服务http://localhost:9998这是失败的。 当我查看请求时,内容类型标题字段将作为ContentType(无连字符)发送。 httpRequestMessage:方法:POST,请求URI:'http://localhost:9998/,版本:1.1,内

  • 我是一个使用angular的新手,我正在努力学习一点,但我不能使用令牌进行简单的获取。我做了很多研究,最后总是得到这段代码。 对于我的后端,我使用Kotlin/Springboot并配置了Cors。 即使如此,当尝试这样做请求我得到这个错误。 访问位于“”的XMLHttpRequesthttp://localhost:5000/api-v1/来源的帐户/列表 -- 果心js:15713错误Http

  • 我使用django rest框架作为后端,并试图使用请求标头中的令牌来验证角请求,但角没有发送任何标头值。我已经尝试了所有的方法添加头请求 访问控制请求标头:访问控制允许标头、访问控制允许来源、授权、内容类型访问控制请求方法:GET DNT:1来源:http://localhost:4001推荐人:http://localhost:4001/

  • 发送请求 发送同步请求 Web3j web3 = Web3j.build(new HttpService()); // defaults to http://localhost:8545/ Web3ClientVersion web3ClientVersion = web3.web3ClientVersion().send(); String clientVersion = web3Client

  • 如何将自定义标头添加到HttpClient请求?我使用方法发布JSON。我需要添加的自定义标题是 这是我到目前为止所做的:

  • 我正在使用Restasured发送请求: 然而,在日志中,我看到又自动添加了1个标题: 我得到415个错误。是否可以发送没有内容类型的请求?我的意思是,没有这个标题;如果发送请求时内容类型等于空行,则仍然存在400错误;使其工作的唯一方法是在不使用此标头的情况下发送请求。