Angular前端提交formdata无法到达NodeJS后端但Postman提交正常

• 请求头Content-Type与实际请求体格式不匹配：你手动指定了Content-Type: application/x-www-form-urlencoded，但Angular HttpClient默认会将传入的JS对象序列化为JSON格式，二者不匹配导致Node后端无法正常解析请求体。
• 请求体多了一层多余的对象包裹：你发送请求时传入的是{ formData }，相当于实际请求体结构为{"formData": {"name": "xxx", "checkboxData": [...]}}，即使解析成功，直接取req.body.name也无法拿到对应值，需要取req.body.formData.name。
• 手动写死了错误的Content-Length头：该值需要与实际请求体的字节长度完全一致，手动写固定值会直接导致服务端解析异常，这个头不需要手动配置，HttpClient会自动计算生成正确值。
• Postman能正常请求的原因是Postman会根据你选择的请求体格式，自动生成匹配的请求头、完成对应序列化操作，不会出现格式不匹配问题。

推荐使用更常用的JSON格式传输，修改成本最低：

前端修改 #

// 移除错误的Content-Type、Content-Length配置
private headerData = {
 headers: new HttpHeaders({
  'Authorization': `Bearer ${this.token}`
})
};

public postmyForm(formData): Observable<any> {
  console.log('formData'+ JSON.stringify(formData));
  // 去掉多余的对象包裹，直接传入表单数据
  return this.http.post(this.url+ '/adduser', formData, this.headerData);
}

后端确认 #

如果用Express框架，确保已经开启JSON解析中间件：

// 放在路由注册前
app.use(express.json())

如果用NestJS框架，默认已经开启JSON解析，不需要额外修改。

如果业务要求必须使用该格式，需要先将表单数据序列化为对应格式再发送：

import { HttpParams } from '@angular/common/http';

private headerData = {
 headers: new HttpHeaders({
  'Content-Type': 'application/x-www-form-urlencoded',
  'Authorization': `Bearer ${this.token}`
})
};

public postmyForm(formData): Observable<any> {
  // 将表单对象转为urlencoded格式
  let params = new HttpParams();
  Object.keys(formData).forEach(key => {
    const value = formData[key];
    // 处理数组类型的checkbox值
    if(Array.isArray(value)) {
      value.forEach(item => params = params.append(key + '[]', item))
    } else {
      params = params.set(key, value)
    }
  });
  return this.http.post(this.url+ '/adduser', params.toString(), this.headerData);
}

后端需要开启对应的解析中间件：

app.use(express.urlencoded({ extended: true }))

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