如何让Angular表单数据以JSON格式显示在本地服务器

你的问题核心有两个：

• Angular端POST请求的参数处理方式有误
• Express服务器未配置JSON请求体解析，且错误使用req.query获取POST数据

Angular端修改（signup.component.ts） #

1. 移除手动JSON序列化：HttpClient.post会自动将JavaScript对象序列化为JSON字符串，无需手动调用JSON.stringify，直接传入login.value即可。
2. 清理无效请求头：Access-Control-Allow-Origin是服务器返回的响应头，不需要作为请求头发送，从httpOptions中删除。

修改后的代码：

import { Component } from '@angular/core';
import { UserInfoModel } from '../userInfoModel';
import {HttpClient, HttpHeaders} from '@angular/common/http'

@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['../form/form.component.css']
})
export class SignupComponent{

  user: UserInfoModel = new UserInfoModel("test@gmail.com", "admin", "password",0,["tst",0,0]);
  httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
  };
  constructor(private http: HttpClient) { }

  addUser(login:any){
    console.log(login.value);

    this.http.post<any>('http://localhost:3000/signup', login.value, this.httpOptions).subscribe(data => {
      console.log('服务器响应:', data);
      // 可根据服务器响应做后续处理，比如跳转登录页
    })
  }
}

Express服务器端修改（index.js） #

1. 添加JSON解析中间件：Express默认不会解析JSON请求体，需要添加express.json()中间件来解析POST请求的JSON数据。
2. 使用req.body获取POST数据：req.query用于获取URL中的查询参数，POST请求的请求体数据需要通过req.body获取。

修改后的代码：

var use = require('./user')

const express = require('express')
const app = express()
let cors = require("cors");

app.use(cors());
// 添加JSON解析中间件
app.use(express.json());

app.get('/', (req, res) => {
  res.send('hello world');
})

app.get('/signup', (req, res) => {
  res.send("hello");
})

app.post('/signup', (req, res) => {
    // 使用req.body获取POST请求体数据
    console.log('收到用户数据:', req.body);
    res.send(req.body);
    console.log("reached server");
})

app.listen(3000,() => console.log("Hello World!"))

验证修改 #

1. 重启Express服务器和Angular应用
2. 提交注册表单后，服务器控制台会打印出正确的用户数据，Angular端也能收到服务器返回的用户数据

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