如何通过Angular 5的onSubmit方法向Node.js发送POST请求？

Let's break down the issues in your current code and get this registration POST request working smoothly with your Node.js backend. Here's a step-by-step solution:

1. Fix Syntax & Basic Structure #

First, your subscribe call is incomplete—let's close that up and add proper error handling so you can debug failures when they happen.

2. Resolve Content-Type Mismatch #

Your current code sets Content-Type: application/x-www-form-urlencoded but sends a plain JSON object. This will cause your Node.js backend to fail parsing the data, since it expects URL-encoded key-value pairs instead of JSON. You have two solid options here:

Option A: Use JSON (Recommended for API Requests) #

Most modern APIs prefer JSON format. Update your httpOptions to use application/json (Angular actually sets this by default, so you can even omit the headers if you want):

onSubmit() {
  // First, validate the form before submitting
  if (!this.RegisterForm.valid) {
    console.log('Please fill out the form correctly!');
    return;
  }

  const goData = { 
    fullName : this.RegisterForm.get('fullname').value, 
    email : this.RegisterForm.get('email').value, 
    userName : this.RegisterForm.get('username').value, 
    password : this.RegisterForm.get('password').value 
  };

  console.log('Submitting data:', goData);

  // JSON is Angular's default, so headers are optional here
  const httpOptions = { 
    headers: new HttpHeaders({ 
      'Content-Type': 'application/json', 
    }) 
  };

  this.http.post('http://localhost:7080/api/users/', goData, httpOptions)
    .subscribe({
      next: (data) => {
        console.log('Registration successful! Response:', data);
        // Add success logic here (e.g., redirect to login, show success toast)
      },
      error: (err) => {
        console.error('Registration failed:', err);
        // Add user-facing error handling here (e.g., display error message)
      },
      complete: () => {
        console.log('Request completed');
      }
    });
}

Option B: Use URL-Encoded Data (If Backend Requires It) #

If your Node.js backend is explicitly set up to handle x-www-form-urlencoded data, convert your JSON object to a URL-encoded string using HttpParams:

onSubmit() {
  if (!this.RegisterForm.valid) {
    console.log('Please fill out the form correctly!');
    return;
  }

  const httpOptions = { 
    headers: new HttpHeaders({ 
      'Content-Type': 'application/x-www-form-urlencoded', 
    }) 
  };

  // Convert form data to URL-encoded params
  const formParams = new HttpParams()
    .set('fullName', this.RegisterForm.get('fullname').value)
    .set('email', this.RegisterForm.get('email').value)
    .set('userName', this.RegisterForm.get('username').value)
    .set('password', this.RegisterForm.get('password').value);

  this.http.post('http://localhost:7080/api/users/', formParams.toString(), httpOptions)
    .subscribe({
      next: (data) => {
        console.log('Registration successful! Response:', data);
      },
      error: (err) => {
        console.error('Registration failed:', err);
      }
    });
}

3. Node.js Backend Setup (Quick Example) #

To ensure your backend can handle the request, here's a simple Express setup:

For JSON Requests: #

const express = require('express');
const app = express();
const cors = require('cors'); // Fixes cross-origin request issues

// Parse JSON request bodies
app.use(express.json());
// Allow requests from your Angular app (typically http://localhost:4200)
app.use(cors({ origin: 'http://localhost:4200' }));

app.post('/api/users', (req, res) => {
  const { fullName, email, userName, password } = req.body;
  // Add your user creation logic here (e.g., save to database)
  console.log('Received registration data:', req.body);
  res.status(201).json({ message: 'User registered successfully', user: { fullName, email, userName } });
});

app.listen(7080, () => {
  console.log('Server running on http://localhost:7080');
});

For URL-Encoded Requests: #

Replace express.json() with this middleware to parse URL-encoded data:

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

4. Key Additional Tips #

• Form Validation: Always check this.RegisterForm.valid before submitting to avoid sending incomplete or invalid data.
• CORS Issues: If you get a cross-origin error in the browser, use the cors middleware in your Node.js backend to allow requests from your Angular app's origin.
• Password Security: Never send plain-text passwords in production! Use HTTPS, and hash passwords on the backend (hashing on the frontend is optional but adds an extra layer).

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