Angular中POST请求订阅失效问题排查求助

这种情况我之前开发时也碰到过好几次，订阅既不触发next也不触发error回调，大概率是请求根本没正常发送或者被拦截了，咱们一步步排查：

1. 先确认跨域（CORS）配置是否正确 #

Angular项目默认跑在4200端口，你的Spring服务在8080，属于跨域请求。浏览器会先发送OPTIONS预检请求，如果Spring后端没配置CORS，浏览器会直接拦截请求，而且这种情况下不会进入你写的error回调，但浏览器控制台会有CORS相关的错误提示（别只看自己打印的log，一定要看浏览器本身的错误信息）。

解决方法：

• 在Spring的setScore接口方法上添加@CrossOrigin注解，允许来自http://localhost:4200的请求；
• 或者配置全局CORS过滤器，覆盖所有接口。

2. 检查网络请求是否真的发出去了 #

打开浏览器开发者工具的「Network」标签，筛选「XHR/Fetch」，触发请求后看看有没有http://localhost:8080/setScore这条请求：

• 如果根本没有这条请求：说明你的代码在订阅之前就出问题了，比如username/score/authToken是undefined，或者前面的逻辑阻止了订阅执行；
• 如果有请求但状态码异常（比如401、403、500）：检查请求头里的Authorization是否正确，后端接口是否正常运行。

3. 补充complete回调排查请求状态 #

你的订阅只写了next和error，可以加上complete回调，看看请求是否完成：

this.http.post<{'username': string,'score': number}>(
  'http://localhost:8080/setScore',
  { 'username': username, 'score': score },
  { headers: new HttpHeaders().append('Authorization', authToken) }
).subscribe(
  data => { console.log('DATA', data); },
  error => { console.log('ERROR', error); },
  () => { console.log('请求已完成'); }
);

如果请求已完成打印了但DATA没打印，说明后端返回的数据结构和你定义的类型不匹配——不过TypeScript的类型是编译时校验，运行时不影响next触发，这种情况大概率是后端返回了空或者其他格式，你可以在next里打印data看看具体内容。

4. 检查请求头的创建是否正确 #

HttpHeaders是不可变对象，append方法会返回新的实例，你的写法没问题，但要确认authToken是否有值。可以改成更直观的写法：

{ 
  headers: new HttpHeaders({
    'Authorization': authToken
  }) 
}

如果authToken是undefined，请求头里就不会有Authorization字段，可能导致后端鉴权失败返回401，但这种情况应该会进入error回调，除非被全局拦截器吞掉了。

5. 排查是否有全局拦截器吞掉了错误 #

如果你的Angular项目里配置了HttpInterceptor，检查拦截器是否正确处理了错误响应。比如有的拦截器会捕获错误但没有重新抛出，导致error回调无法触发：

// 错误示例：吞掉了错误
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  return next.handle(req).pipe(
    catchError(err => {
      console.log('拦截器捕获错误', err);
      return of(null); // 这里应该用throwError(err)重新抛出错误
    })
  );
}

按照上面的步骤一步步排查，应该能找到问题所在~

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