求助：Express/Angular中Post请求被调用两次问题排查

Hey there! Let's dig into why your POST request is firing twice in your Angular + Express setup. I'll break down common culprits on both frontend and backend sides, plus walk through how to debug with your code snippet in mind.

先从Angular端排查（最常见的触发源） #

Looking at your onSubmit code, the first thing to check is whether this method itself is being called twice. Here are the top reasons that happens:

• 重复的表单提交绑定：
  Double-check your template! If you've added both (ngSubmit) to the <form> tag AND a (click) handler to your submit button, every button click will trigger two submissions. For example:

  ❌ Bad:

  <form (ngSubmit)="onSubmit(form.value)">
    <button type="submit" (click)="onSubmit(form.value)">Submit</button>
  </form>
  

  ✅ Good:

  <form (ngSubmit)="onSubmit(form.value)">
    <button type="submit">Submit</button>
  </form>
  

• 重复订阅或服务方法调用：
  Check your saveRegisteredUser service method. If it's accidentally creating multiple http.post calls, or if you've subscribed to the Observable more than once in the component, that'll send duplicate requests. For example:

  // ❌ Avoid this in your service
  saveRegisteredUser(user: any) {
    // Don't call http.post multiple times here
    this.http.post('/api/register', user);
    return this.http.post('/api/register', user);
  }
  

• 快速连续触发：
  If your submit button isn't disabled after the first click, a user might accidentally click it twice before the request completes. Add a loading state to disable the button once submission starts:

  isSubmitting = false;
  
  onSubmit(formValue: any) {
    if (this.isSubmitting) return;
    this.isSubmitting = true;
  
    // ... your existing code ...
  
    this._registrationService.saveRegisteredUser(newRegisterdUser)
      .subscribe(
        () => { /* success logic */ },
        () => { /* error logic */ },
        () => { this.isSubmitting = false; }
      );
  }
  

然后排查Express端 #

If you confirm the Angular onSubmit only runs once (check your browser console for duplicate Form Value logs), the issue might be on the backend:

• CORS预检请求混淆：
  Browsers send an OPTIONS request first for cross-origin POSTs to check permissions. If your Express server isn't handling OPTIONS correctly, you might mistake it for a duplicate POST. Add the cors middleware to handle this properly:

  const cors = require('cors');
  app.use(cors()); // This automatically handles OPTIONS requests
  

• 重复路由注册：
  Make sure you haven't registered your POST route twice. For example, if you import a route module in multiple places, or copy-pasted the route handler by accident:

  // ❌ Duplicate route registration (will run both handlers, but not send two responses)
  app.post('/api/register', (req, res) => { /* handler 1 */ });
  app.post('/api/register', (req, res) => { /* handler 2 */ });
  

• Server-side retry logic：
  If your server has retry middleware or is behind a proxy that retries failed requests, it might be re-sending the POST. Check your Express middleware stack and any reverse proxy config (like Nginx) for retry settings.

快速 Debug 步骤 #

1. Add timestamp logs：
   In your Angular onSubmit add:

   console.log('Submit triggered at:', new Date().getTime());
   

   And in your Express POST route add:

   console.log('POST received at:', new Date().getTime());
   

   If the timestamps match in pairs, it's a frontend trigger issue. If you see two backend logs with only one frontend log, it's a backend/proxy issue.

2. Check network tab：
   Open Chrome DevTools > Network tab, filter by "POST", and see if two requests are being sent. Look at the "Initiator" column to see what triggered each request (e.g., "angular.js" or "XMLHttpRequest").

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