发布表单数据时请求正文为空

Question

我正在向我的后端使用一个简单的 post 请求来获取表单数据，但出于某种原因，正文总是空的。我试图隔离这个所以我将内容类型更改为应用程序 json 并将数据更改为 json 只有这样我才能发送数据。

客户端：

submitForm(event) {
        event.preventDefault();
        console.log("gggg");
        const data = new FormData(event.target);

         axios.post("http://localhost:4000/user-form-post",data).then(function (response) {
            //handle success
            console.log(response);
        })
        .catch(function (response) {
            //handle error
            console.log(response);
        });

服务器端：

// app.use(bodyParser.json());
// app.use(bodyParser.urlencoded({extended:true}));

app.use(express.urlencoded());

// Parse JSON bodies (as sent by API clients)
app.use(express.json());

app.use(logger('dev'));
app.post('/user-form-post', (req,res) =>{

    console.log("dfdf");
    console.log(req.body); // alwayes print empty dict {}
    res.end();

})

这不起作用，因为它需要 jsons（预期行为）：

// app.use(bodyParser.json());
// app.use(bodyParser.urlencoded({extended:true}));

与 Postman 的行为相同。

Answer 1

您需要从 express 端解析您的表单数据。为此，您将不得不使用 multer 或 multiparty。尝试这样的事情。也请参考文档

const multiparty = require('multiparty');

app.post('/user-form-post', (req,res) =>{

   let form = new multiparty.Form();

   form.parse(req, function(err, fields, files) {
      Object.keys(fields).forEach(function(name) {
           console.log('got field named ' + name);
       });
   });
})

Answer 2

当您 post 数据为 data type 时请求正文出现问题。

我最近遇到了 Postman 的问题。您应该 post 类型为 x-www-form-urlencoded 或 raw->JSON 的数据来解决问题。

祝你好运。

Answer 3

说到我的问题，我有这个前端

 const form = new FormData();
      form.email = this.email;
      form.password = this.password;
      console.log("onSubmit -> form", form);

axios.post("http://localhost:3000/register",  form )

onSubmit -> form FormData {email: "admin@gmail.com", password: "123"}

但是后端的 req.body 是空的，我发现 axios.post 中的表单仍然需要 1 个括号 {} 即使它是一个对象。像这样

axios.post("http://localhost:3000/register", { form })

在后端得到像这样的主体之后

req.body = { form: { email: 'admin@gmail.com', password: '123' } }

Answer 4

您正在使用：

app.use( bodyParser.json() );  // to support JSON-encoded bodies
app.use(bodyParser.urlencoded({ // to support URL-encoded bodies
  extended: true
}));

请也使用下面给出的行代码，但首先安装 multer 并将代码写在您的应用程序顶部：

var multer = require('multer');
var upload = multer();

app.use(express.json());

Answer 5

我在发布的代码中也遇到了同样的问题。

但是我已经使用附图中突出显示的以下代码解决了这个问题:-

enter image description here

没有使用 "Content-Type" 来解决这个问题。

希望您使用上述代码片段解决您的问题。

Answer 6

遇到同样的问题，用了2天。以下是我找到的解决方案：

我的请求负载有 JSON.stringify() ，它会使 body 为 {} 空 object 。当我删除 JSON.stringify() 并发送请求时它起作用了。
内容类型应该是 multipart-form :boundary -----
现在，如果我从外部将其设置为 multipart-form，边界的东西就不见了。对于少数人来说，当你将 content-type 设置为 false / undefined 时它起作用了，边界的东西被加起来了，但对我来说不是。
尽管我遵循了所有步骤并将 FormData 作为负载发送，但负载是网络选项卡中的请求负载 object 而不是 FormData object ，我的请求失败并显示 500 。
我尝试了下面的代码，它是 react + typescript（进行必要的更改以避免语法错误）

import QueryString from 'qs';
import { ApiParams } from './xyzfile';
import { ApiHandlerRawType } from './types/xyzfile';



const setDefaultOptions = ({
  method = '',
  url = '',
  params = {},
  data = {},
  signal = null,
  headers = new Headers(),
  ...options
} = {}) => ({
  method,
  url,
  params,
  signal,
  headers,
  data,
  ...options
});

const setData = ({ method, data, ...options }: ApiHandlerRawType) => {
  const option = options;
  if (method !== 'GET' && option.isStreamData) {
    option.body = data;
  }
  return {
    method,
    ...option
  };
};

const addRequestHeaders = ({ headers = new Headers(), ...options }) => {
  const { existingHeaders }: ApiHandlerRawType = options;
  if (existingHeaders) {
    Object.entries(existingHeaders).forEach(([key, value]) => {
      if (key !== 'Content-Type') headers.set(key, value);
    });
  }
  return {
    headers,
    ...options
  };
};

export const ApiHandlerRaw = ({
  url,
  ...originalOptions
}: ApiHandlerRawType): Promise<Response> => {
  const options = setData(
    addRequestHeaders(setDefaultOptions(originalOptions))
  );
  return fetch(url || '', options)
    .then(response => {
      if (!response.ok) throw new Error(response.statusText);
      return Promise.resolve(response);
    })
    .catch(err => Promise.reject(err));
};

export const FileUploadApiHandler = async ({
  headers,
  ...options
}: ApiHandlerRawType): Promise<Response | Blob> => {
  const response = await ApiHandlerRaw({
    headers,
    isStreamData: true,
    ...options
  });
  return response;
};

    export const fileApiService = ({
      url,
      method,
      qsObject,
      headers,
      reqObjectAsStreamData
    }: ApiParams): Promise<Response> => {
      const qs = QueryString.stringify(qsObject, { addQueryPrefix: true });
      const urlPath = `${url}${qs}`;
      const data = reqObjectAsStreamData;
      const existingHeaders = headers;
      return FileUploadApiHandler({
        url: urlPath,
        method,
        data,
        existingHeaders
      }) as Promise<Response>;
    };

从 fileApiService 发送所需的变量。 existingHeaders 将是您的应用 headers ，例如：token / ids ...等。 fileApiService 中的数据是 body .

发布表单数据时请求正文为空

Request body is empty when posting form-data

client

backend

node.js

express

body-parser