Angular/Ionic新版本下POST请求后端接收数据为undefined求助

我之前也碰到过完全一样的情况！Postman能正常发送数据，但前端请求就不行，核心原因基本是请求头没正确设置Content-Type: application/json，或者服务器没配置解析JSON请求体的中间件，一步步来解决：

1. 修正Angular端的请求代码 #

新版本Angular的HttpClient默认会把JavaScript对象序列化为JSON并设置Content-Type，但有时候因为自定义配置或者版本兼容问题会失效，保险起见手动指定请求头：

首先在你的服务/组件里导入必要的模块：

import { HttpClient, HttpHeaders } from '@angular/common/http';

然后注入HttpClient，并定义请求头配置：

constructor(private http: HttpClient) {}

// 定义请求头，明确指定Content-Type为application/json
private readonly httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json'
  })
};

createReview(reviewData: any) {
  const apiUrl = '你的Node.js服务器接口地址';
  
  // 发送POST请求时带上配置好的httpOptions
  return this.http.post(apiUrl, reviewData, this.httpOptions)
    .subscribe({
      next: (response) => console.log('提交成功:', response),
      error: (err) => console.error('提交失败:', err)
    });
}

另外可以先在前端打印一下要发送的数据，确保它能正常序列化为JSON：

console.log('待发送数据:', JSON.stringify(reviewData));

如果这一步报错，说明你的reviewData里有循环引用或者无法序列化的属性，得先清理数据。

2. 检查Node.js服务器的配置 #

如果前端请求头没问题，那就是服务器没正确解析JSON请求体。如果用的是Express框架：

2.1 确保启用JSON解析中间件 #

新版本Express已经内置了JSON解析，不用额外装body-parser，直接加这一行：

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

// 关键：解析application/json格式的请求体
app.use(express.json());

2.2 配置CORS（如果存在跨域） #

如果前端和服务器不在同一个域名下，还得配置CORS，否则请求可能被拦截：

const cors = require('cors');
// 允许所有来源的请求（开发环境用，生产环境要限制域名）
app.use(cors());

2.3 验证服务器路由 #

检查你的POST路由是不是正确读取req.body：

app.post('/your-review-endpoint', (req, res) => {
  console.log('服务器收到的数据:', req.body);
  // 这里如果req.body还是undefined，那肯定是中间件没配置对
  res.status(200).json({ message: '数据接收成功' });
});

3. 最后验证 #

重启前端和服务器，再发送请求：

• 打开浏览器开发者工具，在Network标签里找到你的POST请求，查看Request Headers里有没有Content-Type: application/json
• 查看Request Payload是不是正确的JSON格式

如果这两项都没问题，服务器肯定能收到数据了！

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