Angular中订阅服务时HTTP POST请求被取消如何解决

问题根因&解决方案 #

1. 最高概率：表单默认提交行为中断请求 #

你绑定Submit()方法的按钮如果位于<form>标签内部，按钮默认type为submit，点击后会触发表单原生提交逻辑，导致页面重载，未完成的XHR请求会被直接取消，同时不会抛出JS层错误。
修复方案二选一：

• 给提交按钮添加属性：type="button"，覆盖默认的submit行为
• 在Submit()函数中阻止默认事件：

Submit(e: Event): void {
    e.preventDefault();
    this.authModel!.email = this.emailHolder.value;
    this.authModel!.password = this.passwordHolder.value;
    this.authService.signUp(this.authModel).subscribe((res)=> {console.log(res)});
}

2. 错误处理逻辑配置问题 #

你代码中已经标注createHandleError处可能存在问题，可先临时注释掉错误处理逻辑验证请求是否正常：

// 调试阶段先移除catchError，验证基础请求是否通
signUp(authModel:  AuthModel) : Observable<AuthModel>
{ 
  return this.http.post<AuthModel>(this.signUpUrl,authModel,httpOptions);
}

如果去掉错误处理后请求正常发送，说明HttpErrorService返回的错误处理函数不符合RxJS要求：catchError需要传入接收错误对象、返回Observable的函数，需要检查createHandleError的实现是否符合规范。

3. 服务端CORS配置问题 #

Heroku部署的后端需要配置CORS规则，允许你前端所在的域名访问，同时要放行POST方法、Content-Type: application/json的请求头。如果预检OPTIONS请求被拒绝，也会导致后续POST请求被直接取消，不会走到业务错误处理逻辑。

4. 请求地址校验 #

检查signUpUrl是否携带正确的https://前缀，路径拼写是否和后端接口一致，避免因为地址错误导致请求异常。

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