Angular向ExpressJS后端提交数据时出现异常请求体格式问题

嘿，我能帮你搞定这个请求体格式怪异的问题！你看到的{ '{"first_name":"132","last_name":"132","email":"123"}': '' }这种结构，本质是前端请求头和数据发送格式不匹配导致的，咱们一步步来修复：

问题根源 #

你在Angular的UserService里设置了Content-Type: application/x-www-form-urlencoded，但直接传递了JSON对象作为请求体。Angular的HttpClient会按照urlencoded的规则处理这个对象——它把整个JSON字符串当成了一个键，值为空，这就是后端收到怪异结构的原因。

方案1：改用JSON格式交互（推荐） #

前后端用JSON交互是最常见的方式，配置起来也最简单：

步骤1：修改Angular前端代码 #

把请求头改成application/json（其实HttpClient默认就是这个，甚至可以省略手动设置）：

// user.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { throwError as observableThrowError, Observable } from 'rxjs';
import { User } from '../user';
import { catchError } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  url = "http://localhost:3000";

  constructor(private http:HttpClient) { }

  getUsers(): Observable<User[]> {
    return this.http.get<User[]>(this.url + '/users');
  }

  getUser(id: number): Observable<User[]> {
    return this.http.get<User[]>(this.url + '/users/' + id);
  }

  addUser(user: User): Observable<User[]> {
    const body = { first_name: user.first_name, last_name: user.last_name, email: user.email }
    // 去掉手动设置的headers，HttpClient会自动添加正确的Content-Type: application/json
    return this.http.post<User[]>(this.url + '/adduser', body).pipe(
      catchError(response => observableThrowError(response))
    );
  }
}

步骤2：确保Express后端配置了JSON解析中间件 #

在你的Express入口文件（比如app.js或index.js）里，添加解析JSON请求体的中间件：

const express = require('express');
const app = express();

// 关键：添加这行来解析JSON格式的请求体
app.use(express.json());

// 然后挂载你的路由
const router = require('./your-router-file'); // 替换成你的路由文件路径
app.use('/', router);

方案2：继续使用urlencoded格式（如果必须） #

如果你因为某些原因必须用application/x-www-form-urlencoded，需要把数据正确序列化成urlencoded字符串：

步骤1：修改Angular前端代码 #

用URLSearchParams来构建请求体：

// user.service.ts
addUser(user: User): Observable<User[]> {
  const body = new URLSearchParams();
  body.set('first_name', user.first_name);
  body.set('last_name', user.last_name);
  body.set('email', user.email);

  return this.http.post<User[]>(this.url + '/adduser', body.toString(), { 
    headers: new HttpHeaders({ 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' })
  }).pipe(
    catchError(response => observableThrowError(response))
  );
}

步骤2：配置Express后端解析urlencoded数据 #

在后端入口文件添加urlencoded解析中间件：

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

验证修改 #

完成上述配置后，后端的req.body应该就能正确拿到first_name、last_name和email字段了，你可以再打印req.body确认一下。

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