Angular SSR中通过Express API向Node服务端传输FormData问题

看起来你在Angular SSR的Express中间层处理FormData时踩了个典型的坑——Express默认的中间件不会自动解析multipart/form-data类型的请求，导致req.body为空，Busboy的field/file事件也触发不了，最终用Axios转发时根本没有有效数据。我来帮你一步步解决：

问题核心拆解 #

1. 你的Angular前端生成的FormData是正常的，但手动设置了Content-Type: multipart/form-data，这会丢失浏览器自动生成的boundary分隔符，导致后端解析失败。
2. SSR的Express层没有像非SSR服务端那样用Busboy处理请求流，直接拿req.body自然是空的。
3. 转发Axios时，你传的是空的req.body，而非解析后的FormData或请求流。

分步解决方案 #

1. 修复Angular前端的请求头设置 #

首先，删掉手动添加的Content-Type: multipart/form-data。浏览器会自动为FormData请求生成包含boundary的正确Content-Type，手动设置反而会破坏这个逻辑。

修改Angular组件的headers代码：

saveProduct(formDirective): void { 
  let formData: FormData = new FormData(); 
  // ... 你的FormData追加逻辑不变 ...
  let headers = new Headers(); 
  // 移除这行：headers.append("Content-Type", "multipart/form-data"); 
  headers.append("Accept", "application/json"); 
  headers.append("Authorization", this.jwtToken); 
  this.productsService.addProduct(formData, headers).subscribe(res => {.......}); 
} 

同时更新Angular服务层，确保headers里没有多余的Content-Type：

addProduct(formData: FormData, headers: any): any { 
  formData.forEach(entries => console.log(entries)); 
  // 保险起见，删掉可能存在的Content-Type
  headers.delete("Content-Type");
  return this.http 
    .post(environment.apiURL + "/admin/product/save", formData, { headers }) 
    .pipe(map(res => res)); // Angular 6+推荐用pipe包裹操作符
} 

2. 在SSR Express层用Busboy解析FormData并转发 #

现在要在admin.functions.ts里添加Busboy解析逻辑，就像你非SSR服务端那样处理请求流，解析完成后再构建FormData转发给后端。

首先安装必要依赖：

npm install busboy form-data

然后修改admin.functions.ts：

import axios from 'axios';
import Busboy from 'busboy';
import { PassThrough } from 'stream';
import FormData from 'form-data';

class AdminAPI { 
  async saveProduct(req, res, next) { 
    try { 
      const busboy = new Busboy({ headers: req.headers });
      const forwardFormData = new FormData();

      // 解析普通字段
      busboy.on("field", (key, value) => {
        forwardFormData.append(key, value);
      });

      // 解析文件流，用PassThrough传递给FormData，避免内存溢出
      busboy.on("file", (fieldname, file, filename) => {
        const passStream = new PassThrough();
        file.pipe(passStream);
        forwardFormData.append(fieldname, passStream, filename);
      });

      // 解析完成后转发请求到后端
      busboy.on("finish", async () => {
        const response = await axios.post(`${SERVER}/admin/product/save`, forwardFormData, {
          headers: {
            // 继承原请求的headers，替换Content-Type为FormData自动生成的（带boundary）
            ...req.headers,
            'Content-Type': forwardFormData.getHeaders()['content-type']
          }
        });
        res.json(response.data);
      });

      // 将请求流导入Busboy开始解析
      req.pipe(busboy);
    } catch (error) { 
      next(error); 
    } 
  } 
} 

export default new AdminAPI();

3. 验证逻辑 #

现在前端发送的请求会带有正确的Content-Type（含boundary），SSR的Express层通过Busboy解析出字段和文件，再用FormData把这些内容转发给后端服务，和你非SSR时的请求逻辑完全一致，Busboy的事件也能正常触发了。

额外提示 #

• 如果你的后端服务已经用Multer或Busboy处理文件上传，那么这个转发逻辑可以无缝对接。
• 用PassThrough流是为了处理大文件时不占用过多内存，直接把文件流从前端传递到后端，性能更好。

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