Angular表单POST请求至Firebase云函数时req.body异常问题排查

这个问题的核心在于FormData的请求格式和Firebase云函数默认的解析逻辑不匹配，导致req.body没有被正确解析，最终输出[object Object]。

为什么会出现这个问题？ #

当你用Angular的FormData发起POST请求时，请求的Content-Type是multipart/form-data，而Firebase云函数默认的body解析中间件（内置的body-parser）只配置了解析application/json和application/x-www-form-urlencoded格式的数据，并不会自动解析multipart/form-data。这时候req.body实际上是一个未被正确解析的Buffer或者格式混乱的对象，直接转字符串就会显示[object Object]。

两种可行的解决方案 #

方案一：改用JSON格式发送数据（简单快捷）

如果你的请求不需要上传文件，只是普通的表单数据，完全可以不用FormData，直接发送JSON格式的数据，这样云函数能自动解析req.body：

Angular代码修改：

// 把FormData换成普通的JavaScript对象
const formDataObj = {
  // 这里放你的表单字段，比如name: 'xxx', email: 'xxx@xxx.com'
};

this.http.post(this.endPoint, formDataObj).subscribe(res => {
  console.log(res);
});

Angular的HttpClient会自动把请求头设为application/json，云函数里的req.body就能直接拿到解析后的对象，此时你的云函数代码不需要修改，就能正常输出数据。

方案二：在云函数中添加multipart/form-data解析中间件（适合需要上传文件的场景）

如果你必须使用FormData（比如要上传文件），那需要在云函数中引入multer中间件来解析multipart/form-data格式的数据：

步骤1：安装multer依赖
在你的云函数目录下执行：

npm install multer --save

步骤2：修改云函数代码

const functions = require('firebase-functions');
const cors = require('cors')({ origin: true });
const multer = require('multer');
const upload = multer(); // 初始化multer，这里用默认配置，适合解析普通表单数据；如果要处理文件，需要配置存储路径

exports.test = functions.https.onRequest((req, res) => {
  cors(req, res, () => {
    // 使用multer的none()方法解析不带文件的FormData，解析后的数据会放在req.body里
    upload.none()(req, res, (err) => {
      if (err) {
        return res.status(400).send('解析FormData失败：' + err.message);
      }
      const data = req.body;
      // 现在data就是解析后的表单字段对象，可以正常使用
      res.send(`Hello from Firebase! ${JSON.stringify(data)}`);
    });
  });
});

如果你的FormData里包含文件，需要修改multer的配置来处理文件上传，比如指定存储位置，但如果只是普通表单字段，用upload.none()就足够了。

这样修改后，云函数就能正确解析FormData的数据，req.body会变成一个包含所有表单字段的对象，你可以直接使用或者转成字符串输出。

内容的提问来源于stack exchange，提问作者Giannis Savvidis