Angular调用Express.js路由时出现重复执行的问题

我有一段Express.js路由代码：

// 路由路径：/auth/register/confirm/:confirmationToken

const registerConfirm = asyncHandler(async (req, res, next) => {
  console.log('registerConfirm');
  res.status(httpStatus.OK).json({ msg: 'Registration confirmed' });
});

Angular侧调用代码：

this.authService.registerConfirm('abcdef').subscribe();

当前遇到的问题：Node.js控制台会打印两次registerConfirm，但浏览器网络面板仅显示一次OPTIONS预检请求和一次PUT请求。Postman调用该路由时完全正常，仅Angular调用时出现此问题。若后续涉及数据库操作，会导致重复执行逻辑，引发混乱。

排查与解决方向 #

1. 检查Angular侧是否重复订阅/发起请求

• 确认组件中调用registerConfirm的位置：是否在多个生命周期钩子（如ngOnInit、ngAfterViewInit）或事件回调中重复调用并订阅？比如模板绑定了点击事件调用，组件类里又手动执行了一次。
• 查看authService的registerConfirm方法实现：是否不小心返回了多个Observable（比如用forkJoin/concat包裹两次PUT请求），导致一次订阅触发两次实际请求。
• 给Angular的订阅添加日志验证：

  this.authService.registerConfirm('abcdef').subscribe({
    next: () => console.log('收到后端响应'),
    complete: () => console.log('请求完成')
  });
  

  如果控制台打印两次上述日志，说明是Angular侧存在重复订阅。

2. 确认Express路由是否重复注册

• 检查Express路由注册代码：是否将/auth/register/confirm/:confirmationToken重复注册了两次？比如：

  // 重复调用app.put注册同一路由
  app.put('/auth/register/confirm/:confirmationToken', registerConfirm);
  app.put('/auth/register/confirm/:confirmationToken', registerConfirm);
  
  // 或重复挂载了包含该路由的Router
  const authRouter = express.Router();
  authRouter.put('/register/confirm/:confirmationToken', registerConfirm);
  app.use('/auth', authRouter);
  app.use('/auth', authRouter); // 重复挂载导致路由被注册两次
  

  这种情况下，一次请求会匹配到两个相同的路由处理函数，触发两次console.log。

3. 排查HTTP拦截器是否重复发起请求

• 检查Angular项目中的HTTP拦截器：是否在拦截逻辑中错误地重新发起了请求？比如为了添加token，拦截器里再次调用httpClient.put而非通过next.handle(req)传递请求，导致一次调用触发两次实际请求。

4. 排除浏览器预加载/预取影响

• 检查页面中是否存在<link rel="preload">或<link rel="prefetch">标签指向该接口地址，导致浏览器提前发起了一次请求。

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